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
Related
I am trying to show tags in a Bootstrap select combobox. However, ng-repeat is not populating the options. After some research, I believe I need to write a directive for this, because Bootstrap takes the options and makes a list out of them before Angular adds the options. But I don't know what writing a directive involves.
<select class="combobox form-control" ng-model = "tags.repeatSelect">
<option ng-repeat = "tag in tags.tagNames" value = "{{tag.string}}"> {{tag.string}} </option>
This may solve your problem.
<select data-ng-model="modelValue" class="form-control" data-ng-options="item.string for item in tags.tagNames">
</select>
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/
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.
I am using Select2 with its angular interface for a select form like
<select ui-select2 ng-model='thing' data-placeholder='Options' id='form1>
<option value=''></Option>
<option value='1'>Option 1</Option>
<option value='2'>Option 2</Option>
In my controller, I have the line
$('#form1').select2();
to enable Select2. However, when I run this, I get the error
query function not defined for Select2 s2id_form1
and nothing shows up in the input box. I've tried to put in a query function in the initializer, but nothing is working. When I do define a query function, like
$('#form1').select2({query: function (query) {return 0;}});
It says that I can't put a query option in a select form. How can I fix this error?
Well you're bypassing the AngularUI Select2 code by invoking $('#form1').select2() - that's just the regular jQuery select2 method.
You want to setup your select2 options within an object scoped to your controller
$scope.select2setup = {...}
Then in your html
<select ui-select2="select2setup"....>
It's all pretty well documented # https://github.com/angular-ui/ui-select2