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
Related
I have select tag like this
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
i want to hide the options which are present in the following array object as a priority.
$scope.items = [{itemname:abc, priority:2},{itemname:def,priority:4}]
You can simply call a method to check for visibility of option via ng-show or ng-hide.
See this Fiddle.
further your itemname should be string, like itemname:'abc'
I think you need use ng-options:
<select ng-options="item for item in items">
And "items" - must be array in your controller. So you can manipulate by it
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.
I'm wondering how i can change the selected <option> of a <select> using ng-click.
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
order
Can this be done like in the example above?
thx,
The below code seems to be working. Please check if that is what is required. What I have added is the single quotes surrounding 'name' in anchor tag.
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
order
This can be done using two ways, either call a function on click of the anchor or just set the value 'name' as a string.
1) http://jsfiddle.net/HB7LU/10717/ here you can directly set the string 'name' on ng-click
2) Or this, http://jsfiddle.net/HB7LU/10718/
order
$scope.fun=function(){
$scope.orderProp= 'name'
}
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.
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.