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.
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>
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
By default angular uses an empty value if nothing has been selected in a <select>. How can I change this to a text that says Please select one?
You didnt provide any code so I can't give an example relative to your code, but try adding an option element, e.g.
<select ng-model="item" ng-options="item.category for item in items"
ng-change="doSomething()">
<option value="">Please select one</option>
</select>
Via the ng-selected attribute:
<select>
<option>Hello!</option>
<option ng-selected="selected">Please select one</option>
<option>Another option</option>
</select>
Check out the reference: https://docs.angularjs.org/api/ng/directive/ngSelected
Simply trying to make a default selected value in Angular but thus far I am having no luck.
HTML Before Compile:
<select ng-options="select.Value as select.Name for select in ruleSelect" ng-model="rule.MatchLogic" ng-init="rule.MatchLogic = 0" ></select>
HTML In Browser Source:
<select ng-options="select.Value as select.Name for select in ruleSelect" ng-model="rule.MatchLogic" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">All</option>
<option value="1">At Least</option>
<option value="2">At Most</option>
</select>
How do I make value=0 (All) the default selected value.
All you need to do is set your ng-model value rule.MatchLogic to equal the corresponding value in the options. The options you use are ruleSelect.
So for example, set rule.MatchLogic = ruleSelect[someSelector].Value; inside your controller.
I have a dropdown;
<select class="form-control" data-ng-model="selected_category" data-ng-change="search(true, true)">
<option value="0">Select Category</option>
<option value="{{category.id}}" data-ng-repeat="category in categories">{{category.name}}</option>
</select>
Which works perfect. However, I am manipulating the scope outside of Angular (valid reason) and I use this (It's in coffeescript but easy to understand)
scope.$apply (s) ->
s.units = _me.attr('data-units')
s.selected_category = parseInt(_me.attr('data-category'))
s.search(true,true)
It appears to work in that everything depending on that $scope.selected_category variable changes (The correct products / text comes up) but the dropdown just goes blank if I've selected Select Category (IE: Not changed it since that change) and stays the same if anything else is selected. Looking at the blank dropdown when I use the element inspector in chrome I can see this:
<option value="? number:31 ?"></option>
What's up with that?
It appears that you are missing the ng-selected attribute on option to let Angular know which option is currently selected:
<select class="form-control" data-ng-model="selected_category" data-ng-change="search(true, true)">
<option value="0">Select Category</option>
<option value="{{category.id}}" data-ng-selected="selected_category.id == category.id" data-ng-repeat="category in categories">{{category.name}}</option>
</select>
However, it is prefered to use ng-options if you don't need to do anything to advanced. So, I'd recommend (as #TheSharpieOne mentions in comments), that you change to this:
<select ng-model="selected_category" ng-options="c.name for c in categories">
<option value="">Select Category</option>
</select>
If you need to track by the id then use a track by clause:
<select ng-model="selected_category" ng-options="c.name for c in categories track by c.id">
<option value="">Select Category</option>
</select>