How to call a function in the case given below?
<select class="dropdown">
<option ng-repeat="group in myGroups" ng-model="group.Name" ng-change="myFunction(group.Id)">{{group.Name}}</option>
</select>
ng-click won't work
ng-model is needed if you want to use ng-change (I don't need ng-model in this case otherwise)
ng-change doesn't seem to call a function as well
I know I could probably just use ng-model and $watch, but since I don't think I can really use ng-model in this case I am a bit confused
So, how can I call a function inside ng-repeat select? (its not ng-select as you probably noticed)
Well, the option itself does not change.
What changes is the value of the select element.
So, try this:
<select ng-model="selectedGroup" ng-change="yourFunction()">
<option ng-repeat="group in myGroups">{{group.name}}</option>
</select>
with a yourFunction on the current scopelike this:
scope.yourFunction = function() {
console.log(scope.selectedGroup);
};
I also strongly suggest you have a look at ngOptions here.
Related
I have the code listed below which works fine, however when i attempt to add ng-model and related ng-change to the select, an empty option is added. I understanding why, it is because on init the selectedOption for ng-model is empty.
What I want to do is set a default value so when I can use ng-change to set options IsSelected value to true when user selects it. I'm just not sure how to go about this, I have no issues doing this when I'm working with a static generated select list, but for some reason I can't figure it out for this dynamic generated list.
Any input is appreciated!
<div ng-repeat="optionType in productDetailModel.OptionTypes">
<select name="{{optionType.OptionTypeName}}">
<option ng-repeat="option in optionType.Options"
value="{{option.OptionValue}}">{{option.OptionValue}}
</option>
</select>
</div>
Here's plunkr I mocked to give a basic idea of what I have in mind: http://plnkr.co/edit/xBDfc0XzDwsF0mBiFZOv?p=preview
The initial option is blank because the model is initially undefined.
As tymeJV said, initializing your scope inside of your .js will define a default value that will be shown as selected initially.
$scope.modelName = $scope.optionType.Options[0];
It might be helpful to use ng-options instead of ng-repeat. One reason why it might be beneficial is that ng-options does not create a child scope (unlike ng-repeat). This could help simplify linking to your model and avoid confusion.
<select name="{{optionType.OptionTypeName}}" ng-model="modelName" ng-options="option for option in optionType.Options">
</select>
This article covers the basics of ng-options as well as discusses why it would be used as opposed to ng-repeat.
Hope this helps.
Use ng-options when using a select!
<select name="{{optionType.OptionTypeName}}" ng-model="someModel" ng-options="option as option for option in optionType.Options>
</select>
And then set the ngModel to the default option you want selected:
$scope.someModel = $scope.optionType.Options[0]
There is one directive of select element is ng-init but it call once while first time rendering, but if you change the options dynamically then it will not call again. So for that you need to set the model field with value in scope just below of your new option population logic.
$scope.modelName = $scope.Options[0]; // if array
$scope.modelName = $scope.Options[key]; // if Json Object
I'm trying to figure out why the ng-model is not working with the ng-repeat.
There is my code:
$scope.availableCountries = [];
APIUtility.getCountries().then(function(data){
$scope.availableCountries = data;
$scope.filters.country = "AZ";
});
<select id="eventprice" class="searchpage_select" ng-model="filters.country">
<option value="all">show all</option>
<option ng-repeat="countries in availableCountries" value="{{countries.country_iso}}" ng-class="{'element_selected' : filters.country == countries.country_iso}">{{countries.name}}</option>
</select>
where:
availableCountries is an object from an API call (well formed, trust me)
$scope.filters is an object containing a lot of filters (including country)
The problem is that if i change the ng-model before or after the API call, the select statement is not updated, i think that if i update the scope before angular has the time to execute his ng-repeat, ng-model stop working and will not update the field.
i added the ng-class to prove that filters.country has the right value (ng-class statement returns true when needed and add the class in the right place, so filters.country contains the right value).
I don't know if i was clear enough. Thanks all for your time!
Use ng-options instead of an ng-repeat on an option field.
<select id="eventprice"
class="searchpage_select"
ng-model="filters.country"
ng-options="country.country_iso as country.name for country in availableCountries">
<option value="all">show all</option>
</select>
Problem is in
$scope.filters.country = "AZ";
Try this updated jsfiddle
http://jsfiddle.net/HB7LU/15021/
I am trying to bind 2 properties to a object. The DocumentTypeId, DocumentTypeName. I am using ng-repeat in a select box, i could not get it to work with ng-options. This hack is causing me problems. I have ngstorage setup in my project, I can get the DocumentTypeName from the $rootScope, problem is I cant execute the function correctly.The parameter in the ng-change function is undefined. I would prefer to get rid of the hack and use ng-options, if not then I just need this to work. open to suggestions, thanks
plunker
<select class="form-control" ng-model="model.documentTypeId" ng-change="selectDocumentType(docType)">
<option ng-repeat="docType in docTypes" title="{{docType.DocumentTypeName}}" ng-selected="{{docType.DocumentTypeId == model.DocumentTypeId}}" value="{{docType.DocumentTypeId}}">
{{docType.DocumentTypeName}}
</option>
</select>
I've made it work with ng-options, like you said, it's best if you used that instead of a hack.
<select class="form-control" ng-model="model.documentTypeId" ng-change="test()"
ng-options="docType.DocumentTypeId as docType.DocumentTypeName for docType in docTypes" title="{{docType.DocumentTypeName}}" ng-selected="{{docType.DocumentTypeId == model.DocumentTypeId}}" value="{{docType.DocumentTypeId}}">
{{docType.DocumentTypeName}}
</select>
And the ng-change is just a test function in the controller so you see it works:
$scope.test = function (docType) {
console.log($scope.model.documentTypeId);
};
Working Plunker
I want use select in angularjs.
I have a json that every element have 2 part: name and value. I want show name in dropdown and when user select one of theme, value is copy to ng-model.
$scope.list = [{name:"element1",value:10},{name:"element2",value:20},{name:"element3",value:30}];
For this I have 2 way to use select:
ng-options:
I use ng-options like below:
<select ng-model="model.test" ng-options="element.name for element in list"></select>
It's work correctly, but when I select each of element, I want just value of element is copy to ng-model, but a json is copy to ng-model, like below:
$scope.model.test = {name:"element1",value:1}
I can resolve this problem in angular controller, but I want find a better way that resolve this problem.
For resolove this problem, I use second way:
2.use ng-repeat in options:
<select ng-model="model.test">
<option ng-repeat="element in list" value="{{element.value}}">{{element.name}}</option>
</select>
In second way, just value is copy to ng-model, but as a string type:
$scope.model.test = "10";
I use below code, but all of them return a string value to model.
<option ng-repeat="element in list" value={{element.value}}>{{element.name}}</option>
<option ng-repeat="element in list" value="{{element.value}}|number:0">{{element.name}}</option>
<option ng-repeat="element in list" value={{element.value}}|number:0>{{element.name}}</option>
How can fix this problem?
you can resolve it with ng-options as well
ng-options="element.value as element.name for element in list"
please read this blog to understand more about ng-options.
Also another advantage of ng-options is, it binds the object as opposed to json string in case you want to attach the selected object to ng-model.
Have you tried this :
<select ng-model="model.test" ng-options="element.value element.name for element in list"></select>
btw, if you may have hundreds of records into your list, you should create your own directive, where you would manipulate your DOM with a simple javascript for loop
ng-repeat will be slow to be rendered,
ng-options adds every record into $watch.
Say that I bind an array to a select tag using the following:
<select ng-model="selData" ng-options="$index as d.name for d in data">
In this case, the associated option tags are assigned a sequence of index values: (0, 1, 2, ...). However, when I select something from the drop-down, the value of selData is getting bound to undefined. Should the binding actually work?
On the other hand, say that I instead do the following:
<select ng-model="selData" ng-options="d as d.name for d in data">
Here, the option tags get the same index, but the entire object is bound on change. Is it working this way by design, or this behavior simply a nice bug or side-effect of AngularJS?
Since arrays are very similar to objects in JavaScript, you can use the syntax for "object data sources". The trick is in the brackets in the ng-options part:
var choices = [
'One',
'Two',
'Three'
];
In the template:
<select
ng-model="model.choice"
ng-options="idx as choice for (idx, choice) in choices">
</select>
In the end, model.choice will have the value 0, 1, or 2. When it's 0, you will see One; 1 will display Two, etc. But in the model, you will see the index value only.
I adapted this information from "Mastering Web Application Development with AngularJS" by PACKT Publishing, and verified at the Angular reference documentation for select.
Since you can't use $index but you can try indexOf.
HTML
<div ng-app ng-controller="MyCtrl">
<select
ng-model="selectedItem"
ng-options="values.indexOf(selectedItem) as selectedItem for selectedItem in values"></select>
selectedItem: {{selectedItem}}
</div>
Controller
function MyCtrl($scope) {
$scope.values = ["Value1","Value2"];
$scope.selectedItem = 0;
}
Demo Fiddle
Comment:
Array.prototype.indexOf is not supported in IE7 (8)
$index is defined for ng-repeat, not select. I think this explains the undefined. (So, no, this shouldn't work.)
Angular supports binding on the entire object. The documentation could be worded better to indicate this, but it does hint at it: "ngOptions ... should be used instead of ngRepeat when you want the select model to be bound to a non-string value."
You can also use ng-value='$index' in <option> tag.
<select ng-model="selData">
<option ng-repeat="d in data track by $index" ng-value="$index">
{{d.name}}
</option>
</select>
Don't use $index inside select tags. Use $index inside the option tags if you want to use the array indexes as either values or options.
<option ng-repeat="user in users" value="{{user.username}}">{{$index+1}}</option>
If you want to use inside values just put it in the value attribute as binding expression like
<option ng-repeat="user in users" value="{{$index+1}}">{{user.username}}</option>
and my controller code be like:
var users = ['username':'bairavan', 'username':'testuser'];