http://plnkr.co/edit/JVMZqnY5Vilek4NxDNGE?p=preview
There is a select like this (nothing unusual here):
<select ng-model="model.selectedValue"
ng-options="value.id as value.value for value in modelOptions">
<option value="" ng-if="!model.selectedValue">Null</option>
Initially the model is null, so when the page first opens the Null option is selected.
$scope.model ={"selectedValue":null};
However, if I then change the selected value to something else, and then back to null by clicking these two buttons
<button ng-click="model.selectedValue=1">Select Yes</button>
<button ng-click="model.selectedValue=null">Select Null</button>
then the Null option is NOT selected - so now the UI is out of sync with the model.
Clearly this is a bug with Angular (1.2.22), but is there any workaround?
Change the ng-if to ng-show:
<option value="" ng-show="!model.selectedValue">Null</option>
This is because ng-if creates a new scope, so you could also use ng-if along side $parent:
<option value="" ng-if="!$parent.model.selectedValue">Null</option>
I have got an answer from the Angular team at https://github.com/angular/angular.js/issues/8670.
This was actually working up to version 1.2.14 but they don't think it's a bug. Apparently the right thing to do is not use the ng-if inside the select, and instead work with the model, the Javascript array of options the select is binding to.
I assume for the code sample in the question, this means setting up a watcher on model.selectedValue and adding/removing a Null option to/from modelOptions as appropriate.
Related
Having a lot of trouble with ng-repeat in a select tag. The below is not working for some reason though all documentation indicates that it should.
<select id="blahh" ng-model="log_instances" class="selectpicker" multiple>
<option>this works</option> <!-- this works -->
<option ng-repeat="comp in env.status.components">test-value</option>
</select>
The only option that ends up showing is the 'this works' one, but I would expect 'test-value' to show up for each of the items described in the ng-repeat's.
Additionally, I also checked the console for angular.element(document.getElementById('blahh')).scope() and it shows the proper data that I would expect to see. Also, if I include a table right below this select with the same ng-repeat's and fields, it produces the expected output just fine. I'm using Angular 1.6.5
Any help is appreciated!
The HTML snippet included with the original question had <span> tags as immediate children of the <select> tag, which would've produced invalid markup as only <option> or <optgroup> elements are permitted.
Whenever you have a data collection that needs to be presented as a select list, Angular's ng-options attribute makes it easy.
DEMO
Also, if you need a default option (for when the collection data might be in transit due to an AJAX request), include an <option> element assigned with an empty value (i.e. value=""), then you could use ng-if to hide this default option when it is no longer necessary.
Use ng-options like below. But your code also should work check env.status.components
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
My question to you would be, why do you want to use a ng-repeat inside a multiple select, when you have ng-options handy?
Assuming your comp object looks like this:
{
name: 'somevalue'
}
I would change your code to look like so:
<select id="blahh" multiple="true" ng-model="log_instances" ng-options="comp.name for comp in env.status.components"></select>
Please have a look at the plunker demo I have made for you
I'm using two controllers here. One, productComponentsController, handles a call to our database that pulls back an array of productComponent objects. The other, AddEditArticleController, controls the 'Create New / Edit Existing Article' page.
On my Add/Edit Article page, I want a <select> to populate with productComponents, and, if I am editing an existing Article, to be pre-selected with that Article's current productComponent.
Simple as this seems, I cannot make the field pre-select with the existing productComponent, though it does populate the <select> with them correctly. I've tried ngRepeat and ngOptions and both work for populating the dropdown, but neither works for pre-selecting the existing productComponentID from the array returned by the server.
My HTML, using ngOptions:
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
ng-model="vm.selectedComponent"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
class="form-control input-md"
ng-options="component.name for component in pvm.productComponents track by component.id"></select>
My HTML, using ngRepeat:
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
ng-model="vm.selectedComponent"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
class="form-control input-md">
<option value="{{component.id}}"
ng-repeat="component in pvm.productComponents"
ng-selected="vm.selectOption(component.id)"
ng-bind-html="component.name"></option>
</select>
<!-- vm.selectOption() returns true if the current option's ID equals the productComponentID of the current Article. Therefore this option would be selected. -->
In my AddEditArticleController, I set vm.selectedComponent equal to the productComponentID of the Article that was returned by the database, in the promise.then() of my call. While vm.selectedComponent does change, this doesn't do anything to the dropdown.
Also, in my generated HTML, I get the option: <option value="? number:47 ?"></option> (for an Article where the productComponentID is = 47). Apparently this happens as a result of the model being set to an unknown value but I don't know why the model would be set to anything other than an integer id.
Is this because my select is accessing multiple controllers, or am I missing something obvious here? Any help is greatly appreciated, let me know if more info is needed.
I believe you're looking for ng-init...
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
class="form-control input-md"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
ng-model="vm.selectedComponent"
ng-init="vm.selectedComponent=productComponentID"
ng-options="component as component.name for component in pvm.productComponents track by component.id"></select>
So it turns out that because the model has to be a string, I have to cast the vm.selectedOption to a string whenever it's changed (in this case, in the vm.selectOption function) using String(). This is using ngRepeat. ngInit seems to have no bearing on how my code works.
Boom, that's it, and my code works.
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
It appears that even though I have the ng-model value set before ng-repeat creates my option, the option that corresponds to the value is not selected.
I'm i doing something wrong? or is this just the way it works. this is a real pain because I have to worry about the order I call my functions in.
This also seems odd because once I change the value to kick off a digest loop the option gets selected.
see this working example
http://jsbin.com/xufisu/6/edit
Using ng-repeat on options will give you a lot of issues. You need to use ng-options instead:
<select size="4" style="width:150px" ng-model="filterCondition.operator"
ng-options="operator.value as operator.displayName for operator in operators">
<option></option>
</select>
I have a drop down bound to ng-options (which uses an array of objects)
and ng-bind (which uses a string). This doesn't work because object comparison fails. Is there a workaround for this?
<select class="form-control"
ng-model="Person.Gender"
ng-options="a.name for a in dropdowns.gender">
</select>
Thanks
If I'm not mistaken what you want is to bind the name property to the person.gender property of the $scope. What you need to do is:
<select class="form-control"
ng-model="Person.Gender"
ng-options="a.name as a.name for a in dropdowns.gender">
</select>
The first part defines what is actually stored in the ng-model and the second part how is going to display, in this case both displayed value and model value are the same.
Working fiddle: jsfiddle