When I try the following code:
<select name="test" id="test" ng-model="test"
ng-options="c.id as c.n for c in [{n:'t1',id:'123'}]">
</select>
I get
<select name="test" id="test" ng-model="test" >
<option value="0" selected="selected" label="t1">t1</option>
</select>
Why the value is not '123' per angular's ng-options syntax.
Thanks,
That is because when the options are created by ng-options by iterating over the array, the value of each option element is the loop couter. However your test variable contains the value item.age. You can check it by printing it like {{test}}.
You can achieve what you want like this
<select name="test" id="test" ng-model="test" >
<option ng-repeat="c in [{n:'t1',id:'123'}]" value="{{c.id}}" >{{c.n}}</option>
</select>
Related
I have this select and the values are displayed correct but how to I get the value of the selected option in my function FilterByBrand()?
<select ng-model="selectedBrand" ng-change="FilterByBrand()">
<option ng-value="-1">--Alle Brands--</option>
<option ng-repeat="x in Brands" ng-value="{{x.opt_Brand.Id}}">{{x.opt_Brand.Name}}</option>
</select>
You don't use curly braces (interpolation) inside the ng-value. Check this answer for a great summary of when not to use interpolation - https://stackoverflow.com/a/50419144/5867572
<select ng-model="selectedBrand" ng-change="FilterByBrand()">
<option ng-value="-1">--Alle Brands--</option>
<option ng-repeat="x in Brands" ng-value="x.opt_Brand.Id">{{x.opt_Brand.Name}}</option>
</select>
I just updated the AngularJs version from AngularJS v1.4.8 to AngularJS v1.8.0 and I have a select which requires a default value. for some reason the ng-selected stop working. Can you please advise how to set the ng-selected on 1.8.0 please? (code uses an ng-model)
<input name="questionamount" class="form-control uservalue" type="number" min="0" ng-model="userInput1" ng-disabled="content.NotRelevant" ng-blur="setMainFieldAsTouched(); updateFormVisibility()" ng-change="update('userInput1',userInput1)" val-bubble>
<select name="questionperiod" class="form-control" ng-model="userInput2" ng-disabled="content.NotRelevant" ng-blur="setMainFieldAsTouched()" ng-change="update('userInput2',userInput2)" val-bubble>
<option value="">-- Select a period --</option>
<option value="48">Year</option>
<option value="24">6 Months</option>
<option value="12">Quarter</option>
<option value="4" ng-selected="true">Month</option>
<option value="5">Four Weekly</option>
<option value="2">2 Weeks</option>
<option value="1">Week</option>
</select>
<input name="questionvalue" class="form-control" type="number" min="0" readonly ng-required="content.Mandatory && !content.NotRelevant" max="{{content.TriggerLimit}}" ng-change="update('content.Value',content.Value)" ng-blur="updateFormVisibility()" ng-model="content.Value" val-bubble>
</div> ```
Thanks in advance,
Jordi
From the docs:
Note: ngSelected does not interact with the select and ngModel
directives, it only sets the selected attribute on the element. If you
are using ngModel on the select, you should not use ngSelected on the
options, as ngModel will set the select value and selected options.
Which would mean, set the value of userInput2 to your default value and do not use the ng-selected attribute. See also this.
How can I pre-select an option, when I have the options repeated using ng-repeat, as so:
<select data-ng-model="info.country" ng-change="changeCountry()" name="country" required>
<!-- <option selected disabled hidden value=''></option> -->
<option data-ng-repeat="country in countries" value="{{country.id}}">{{country.countryName}}</option>
</select>
The data-ng-model returns the number 3 , the method ng-change="changeCountry()" uses the same number in its implementation.
I need the pre-selected item to be 3 and not 1 (this will be reduced by 1, since it is an array, but I think you get the idea)
I need to pre-select the item. Is this possible, and how can one achieve such result?
CodePen here.
ng-repeat on <options> converts id to string. This is a reason why it doesn't work.
{"country":3} vs {"country":"3"}
You can solve it by using ng-options:
<select data-ng-model="info.country"
ng-change="changeCountry()" name="country"
ng-options="c.id as c.countryName for c in countries"
required>
</select>
I managed to achieve this by using ng-options:
<select ng-options="country.id as country.countryName for country in countries" ng-model="info.country" ng-change="changeCountry()" name="country" required></select>
Angular < 1.4 works with ng-options shown as such:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue">
With the following array of options:
[{ value:"4_220588",label:"dropdown 1-test value 1"},{value:"4_220589",label:"dropdown 1-test value 2"}]
If you look at the resultant HTML is is as you would expect:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue" class="ng-pristine ng-valid ng-touched">
<option value="" class="">-- SELECT ONE --</option>
<option value="0" label="dropdown 1-test value 1">dropdown 1-test value 1</option>
<option value="1" label="dropdown 1-test value 2">dropdown 1-test value 2</option>
</select>
As soon as you change the angular version to Angular 1.4+, the option value attribute get's messed up. Here is the output with the same ng-options using a newer version of angular:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue" class="ng-pristine ng-valid ng-empty ng-touched">
<option value="" class="" selected="selected">-- SELECT ONE --</option>
<option label="dropdown 1-test value 1" value="string:4_220588">dropdown 1-test value 1</option>
<option label="dropdown 1-test value 2" value="string:4_220589">dropdown 1-test value 2</option>
</select>
What is the solution to getting the value to show up still as the index of the array?
Here is the plnkr: http://plnkr.co/edit/3CTUI9b9ntTGWhXDNQI5?p=preview
Your application logic should not be sensitive to the value attribute in the dropdown, because ng-model will set the model correctly regardless of what is output in the HTML. If you application logic does expect a specific format for this attribute, you have 3 ways to deal with this breaking change.
Use ng-repeat instead of ng-options. This is the least recommended option, as it changes the way the select lists work significantly.
Use a track by clause to enforce the key format that you are expecting, i.e. option.value as option.label for option in options track by option.value. This presumes that option.value exists and is the value you wish to represent. http://plnkr.co/edit/TSXfkpf1lhsE9QYa2NAc?p=preview
Change your application logic to expect the hashkey instead, or preferably correct the logic so that it only relies upon ng-model.
One solution would be to use ng-repeat over the options.
<select ng-model="vm.selectedValue">
<option value="" selected disabled>-- SELECT ONE --</option>
<option ng-repeat="option in options"
value="$index"
ng-selected="option === vm.selectedValue">
{{option.label}}
</option>
</select>
Here is your updated Plunkr.
This should do the trick:
<select ng-options="index as option.label for (index, option) in options2" ng-model="vm.selectedValue">
<option value="">-- SELECT ONE --</option>
</select>
On render the value of the selected option would be string:index but will output the desired value without the type included. Here is your edited plunker with the expected result in the Selected Value:
Plunker
Here is a snippet. Q2 is selected as I expect.
<select name="quarter" ng-model="Quarter" >
<option value="1" >Q1</option>
<option value="2" ng-selected="Quarter=='Q1'">Q2</option>
<option value="3">Q3</option>
<option value="4">4</option>
</select>
Changing 'Q1' to 'Q2' makes nothing as selected as I expect. Now putting ng-selected="Quarter=='Q1'" DOES NOT make Q1 selected until i delete ng-selected="Quarter=='Q2"
wtf. How is this suppose to work?
If you put the ng-selected on the option element, your option will be selected when the ng-selected value is true. In your case, the option Q2 is selected when Quarter is equal to Q1.
If you want to select the value passed in Quarter, you must put the ng-selected on the select element :
<select name="quarter" ng-model="Quarter" ng-selected="Quarter"
ng-options="Quarter for Quarter in Quarters" >
{{Quarter}}
</select>
Take a look at the select directive documentation.
<select ng-model="hour">
<option ng-selected="hour == $index" ng-repeat="h in (((b=[]).length=24)&&b) track by $index" ng-bind="$index">{{h}}</option>
</select>
if you want a select for 24 hour, you can do this.
like this:
<body ng-controller="MainCtrl">
{{referenceNumber}}
<select ng-model="referenceNumber">
<option ng-selected="!referenceNumber">Default</option>
<option ng-repeat="number in numbers track by $index" ng-value="number">{{number}}</option>
</select>
</body>
"I believe one of the main reasons for ngSelected is to set default
values depending upon if the model is not set correctly." joshkurz commented on Mar 3, 2014
So the right way would be to rely on ng-model only in you case.
The right way to do what you are trying to do(pre select a option) is like this:
<select ng-model="purchase.product" name="purchase.product" class="u-full-width" ng-options="product.id as product.name for product in products"></select>
Reference:
http://plnkr.co/edit/xXq3b40nvqkjPlyCxZNG?p=preview
https://github.com/angular/angular.js/issues/6528
The ng-selected directive takes a boolean value or an expression which leads to a true/false boolean result.
You just need to pass its value true to make it work or an expression which leads to true.
It has nothing to do with ng-model of <select> tag.
Following is an example of this behaviour:
<select name="quarter" ng-model="Quarter" >
<option value="1" >Q1</option>
<option value="2" ng-selected="true">Q2</option>
<option value="3">Q3</option>
<option value="4">Q4</option>
</select>
This will make option Q2 selected by default.