I am new to ionic + angularJS... I have created a select item drop down like this
<div class="list">
<div class="item item-input item-select">
<div class="input-label" >
Unit
</div>
<select id="unit">
<option selected>Kilometer</option>
<option>Mile</option>
</select>
</div>
</div>
I am wanting to get the value with angularJS... I have tried this..
The scope.convert is coming when I click a button.
$scope.convert = function() {
alert($scope.unit);
};
It outputs "undefined".. Why is this?
$scope.unit is actually not defined in the scope, hence you get undefined. You have to define unit on the scope. Since this is an angular application, you can do it the angular way.
In your controller, you want to define a model to hold the value selected. Lets call this model unit like you are actually trying to do. Hence you can initialize this model to Kilometer in your controller.
$scope.unit = 'Kilometer'
Now you need an array of options. This can be set up in your controller as well.
$scope.unitOptions = ['Kilometer', 'Mile']
We use scope to expose our models to the view, hence in your view, you can access this models as follow:
<select id='unit' ng-options="unit for unit in unitOptions">
You will get a dropdown with 'Kilometer' and 'Mile'. You can select any one of them and your model unit will be updated.
//This should now work
$scope.convert = function() {
alert($scope.unit);
};
Note: I left the id attribute on the select element to show it has nothing to do with the model in your controller.
Related
i am very new to ionic and angularjs. i am using ionic 1 and i want to get a value after make a selection from dropdown..after i select and click next button, the other page will show the name of item that i select.this is on first page. on the second page i want it display communication if i select it on 1st page. i know this is the wrong way..can help me?
<label class="item item-input item-select">
<div class="input-label">
Initiative A
</div>
<select>
<option>Communication</option>
<option>Customer</option>
<option selected></option>
</select>
Save the value in $rootScope
.controller('Ctrl_1',function($rootScope){
$rootScope.myValue= "communication(i.e, use ng-modal)"
})
and access it like this
.controller('Ctrl_2',function($rootScope){
alert("what is my value? " + $rootScope.myValue);
})
You can get the selected option using ng-modal.
<select ng-modal="selectedValue">
<option>Communication</option>
<option>Customer</option>
<option selected></option>
</select>
Now you will get the selected option on controller by $scope.selectedValue.
You can pass this value to next page using $rootScope or as stateParam.
In first controller,
.controller('myCtrl1',function($scope, $rootScope){
$rootScope.myValue = $scope.selectedValue;
})
In second controller,
.controller('myCtrl2',function($scope, $rootScope){
$scope.selectedValue = $rootScope.myValue;
})
You can display this value in second page HTML like {{selectedValue}}
It's been several hour i'm trying to figure this very simple issue.
I have ng-model attribute which bind to payment object (ng-model="payment.newPaymentLine.method"), like this one:
<div class="form-group form-inline">
<label>Payment Method:</label>
<select class="form-control"
ng-model="payment.newPaymentLine.method"
ng-options="paymentMethod for paymentMethod in payment.paymentMethods" required></select>
</div>
I was wondering how can i configure ng-resource which bind with that property, i try the following format("#payment.newPaymentLine.method") but it doesn't work:
classContext.bankRepository = classContext.salesOrderResource(
classContext.appConfig.getApiEndPoint(classContext.appConfig.apiPath.payment) + "/:PaymentMethod/banks"
, { PaymentMethod: "#payment.newPaymentLine.method" });
btw i'm using type script 1.5
I think i have misunderstood ng-resource concept, the parameter should bind to the data object properties not with the context object
I'm getting a problem with angular and I'm not understanding what the problem may be:
thats a div:
<div ng-controller="CountrySelectorController">
Selected Countryid = {{countryid}}
<div class="radio" ng-repeat="country in countries">
<input type="radio" name="countryOptions" ng-model="countryid" value={{country.countryid}} ng-checked="countryid == country.countryid" /><span style="margin-left:10px;">{{country.countryid}}.{{country.name}}</span>
</label>
</div>
</div>
thats my controller:
app.controller('CountrySelectorController', function($scope, $rootScope){
$scope.countryid = 1;
});
the problems I'm getting:
-Selected Countryid=1 appears at start . Although I'm selecting different countries, the model is not updating
ng-repeat creates its own scope, which is not what you want to bind the ng-model to. You want to bind ng-model to the controller's scope (which is the parent scope of the ng-repeat).
Use $parent to go up a level to the correct scope. Also, don't use ng-checked.
ng-model="$parent.countryid"
Demo
I got confused a bit about whether can we create multiple instance of controller and that to in nested form for eg -
<div ng-controller="abc">
<form ng-submit="call()">
<input type=text ng-model="content"/>
</form>
<div ng-controller = "abc">
<form ng-submit="call()">
<input type=text ng-model="content"/>
</form>
</div>
</div>
i just want to know that if i use the same model with other instance of controller, so model value would be same or different. Similar to static variable ?
i just want to know that if i use the same model with other instance
of controller, so model value would be same or different. Similar to
static variable ?
All declarations of ng-controller create a new instance of the controller. So, if you had two instances side by side, like this:
<div ng-controller="abc">
<input type=text ng-model="content"/>
</div>
<div ng-controller="abc">
<input type=text ng-model="content"/>
</div>
plunker
then, all of the $scope properties of each would be completely independent.
When a ng-controller is nested, then its scope inherits the parent controller's scope. So for this you'd expect that content refers to the same scope property:
<div ng-controller="abc">
<input type=text ng-model="content"/>
<div ng-controller="abc">
<input type=text ng-model="content"/>
</div>
</div>
plunker
However, since content is not defined directly in the controller something strange happens. If you fill in the parent input first. Both, inputs become bound to the same scope property. However, if you fill in the child input first, they are independent!
This can be confusing until you understand that Angular is being lazy when it creates the property on the scope. content is null at first on both scopes. It is only when it has a value that it will inherit.
So, what do you do if you want to keep things separate? Add an initial value to a $scope property inside the controller:
app.controller('abc', function($scope) {
$scope.content = '';
});
plunker
This way, each separate controller instance is initialized with its own content property.
Hope this helps.
I am very new to AngularJS. I have made a custom directive user and I want to call it dynamically in class attribute by using a variable.
e.g. $scope.dirName = "user";
When i use this variable in below code:
<div class = {{dirName}}></div>
Its result must show two input fields with specified values. But it is not doing so. When I replace {{dirName}} with user. It is working fine, means two input fields are shown with values as specified. Can anybody tell, what mistake I am doing?
This is index.html
<div ng-controller = "Ctrl">
<form name = "myForm">
<div class = {{dirName}}></div>
<hr>
<tt>userName : {{user}}</tt>
</form>
This is script.js
<pre>var app = angular.module('App',[]);
app.controller('Ctrl', function($scope){
$scope.user = {name:'adya',last:'Rajput'};
$scope.dirName = "user";
});
app.directive('user',function(){
return{
restrict:'C',
templateUrl:'template.html'
};
});</pre>
template.html contains:
UserName : <input type='text' name='userName' ng-model='user.name' required>
LastName : <input type='text' name='lastName' ng-model='user.last'>
Unfortunately, you cannot save names of directives in string variables and access them in the HTML. You can, however, save a string in a variable in $scope and use ng-switch to select the correct directive:
<div ng-switch="dirName">
<div ng-switch-when="ng-user">
<div ng-user></div>
</div>
<div ng-switch-when="...">
...
</div>
</div>
However, now it might be better to use something more descriptive than ng-user to switch over.
Sidenote: Do not use ng- prefix in your own directives. Angular uses that prefix so that it does not collide with other namespaces. You should use your own prefix for your directives.
Update: For the updated question as to why <div class="{{dirName}}"></div> does not work, it happens because angular $compiles the directive only once. If you first $interpolate the content of the template (which will replace {{dirName}} with ng-user) and then explicitly $compile it before entering it in the HTML, it should work.