I have select-box in my view where you can select a worker.
<select ng-model="search.wrk_worker_id">
<option ng-repeat="w in workers.message">{{w.wrk_forename}}</option>
</select>
w has following properties:
wrk_worker_id
wrk_forename
wrk_surname
and so on!
is it possible to bind search.wrk_worker_id to w.wrk_worker_id, but still show w.wrk_forename in the select box ?
you specify a value property on your option this is the value that will bind to search.wrk_worker_id after you select the option in the selectbox:
<select ng-model="search.wrk_worker_id">
<option ng-repeat="w in workers.message" value={{w.wrk_worker_id}}>{{w.wrk_forename}}
</option>
</select>
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');
Guys after I used the angular directive ng-options I got this result
<select name="users" id="users" ng-options="user.id as user.name for user in users" ng-model="user">
<option value="number:1" label="Developers">Ahmed</option>
<option value="number:2" label="Designers">Jon</option>
<option value="number:3" label="HR">Astm</option>
<option value="number:4" label="Doctor">Fady</option>
</select>
<select name="colors" id="colors" ng-options="color.code as color.name for color in colors" ng-model="color">
<option value="string:ff0000" label="Developers">Red</option>
<option value="string:ffffff" label="Designers">White</option>
<option value="string:000000" label="HR">Black</option>
</select>
why the option value contains the data type such as number:1 or string:ffffff ??
how I can remove the data type from it and keeping only the value ?
Add track by [id] at the end of ng-options.
In your case it would be:
ng-options="user.id as user.name for user in users track by user.id"
and
ng-options="color.code as color.name for color in colors track by color.code"
Right now there is not option in angular to remove that type. If you need that, use custom directive with ng-option as parent.
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
This seems to be a really straight forward code, but I cannot figure out why it is not working.
I want to filter the 'model' dropdown by selected 'make',
Make:
<select ng-model="makeng" ng-options="option.display for option in makes">
<option ng-disabled="true" ng-selected="true" value="">Select a make</option>
</select>
Model:
<select ng-model="modelng" ng-options="option.display for option in models | filter:{make:makeng}">
<option ng-disabled="true" ng-selected="true" value="">Select a model</option>
</select>
here is the plunker
http://plnkr.co/edit/bHb9AScd2m58acUUyI0t?p=preview
Problem is with your first ngoption, you need to set the model as the value of value property using select as syntax option.value as option..
<select ng-model="makeng"
ng-options="option.value as option.display for option in makes">
Plnkr
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.