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.
Related
I have a drop down which contains the following values
<select class="form-control">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
Because of this in drop-down the value is always selected to "Critical"
In my scope i have defined the values of severity per drop-down. How do i select that ?
For example say the value is "High". How do i set the default value to high and not critical
You'll need to define at object within your scope and bind it to the ng-model of your select.
Script
$scope.form = {
"severity": "high"
};
HTML
<select class="form-control" ng-model="form.severity">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
There are a couple of ways to select an option with angular:
1- Bind it to a model and set the model:
<select class="form-control" ng-model="myValue">
And
$scope.myValue = 'medium';
2- You can set it in a directive by jQuery or JS:
$("#yourselectid").val('low');
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
I have some doubts with using ngoptions. I am not able to set value attribute for the option items.Here is example plunker
$scope.ListOfValues=[{optiontext:'Active',optionvalue:'opt1'},
{optiontext:'inactive',optionvalue:'opt2'},
{optiontext:'terminated',optionvalue:'opt3'}];
And my html code is
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues">
</select>
The generated html is as shown below.
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="string:opt1" label="Active">Active</option>
<option value="string:opt2" label="inactive">inactive</option>
<option value="string:opt3" label="terminated">terminated</option>
</select>
I was expecting it to be as shown below
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="opt1" label="Active">Active</option>
<option value="opt2" label="inactive">inactive</option>
<option value="opt3" label="terminated">terminated</option>
</select>
So why does it add string: to the value attribute? How i can get my desired output?
It has to deal with 1.3 -> 1.4 Angular version API change - if you check this plunkr (v.1.3) it will show just indexes as values of the <option> tags.
To make it also work with Angular +1.4 you should add the following statement to your ng-options expression track by emp.optionvalue. See this plunkr (v.1.4) .
<select id="emptype"
ng-model="empstatus"
ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues track by emp.optionvalue">
</select>
But the value of the ng-model is correctly updated in both cases, see {{empstatus}} in template of my examples.
So as #ExplosionPills say that should not be a issue.
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
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>