I'm a little bit confused with Angular and ng-options.
I have a simple array and I want to init a select with it. But, I want that options value = label.
script.js
$scope.options = ['var1', 'var2', 'var3'];
html
<select ng-model="myselect" ng-options="o for o in options"></select>
What I get:
<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>
What I want:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
So I tried:
<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>
<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>
(But it didn’t work.)
Edit:
My form is submitted externally, which is why I need 'var1' as the value instead of 0.
You actually had it correct in your third attempt.
<select ng-model="myselect" ng-options="o as o for o in options"></select>
See a working example here:
http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview
The trick is that AngularJS writes the keys as numbers from 0 to n anyway, and translates back when updating the model.
As a result, the HTML will look incorrect but the model will still be set properly when choosing a value. (i.e. AngularJS will translate '0' back to 'var1')
The solution by Epokk also works, however if you're loading data asynchronously you might find it doesn't always update correctly. Using ngOptions will correctly refresh when the scope changes.
You can use ng-repeat with option like this:
<form>
<select ng-model="yourSelect"
ng-options="option as option for option in ['var1', 'var2', 'var3']"
ng-init="yourSelect='var1'"></select>
<input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>
When you submit your form you can get value of input hidden.
DEMO
ng-selected
ng-repeat
If you setup your select like the following:
<select ng-model="myselect" ng-options="b for b in options track by b"></select>
you will get:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
working fiddle: http://jsfiddle.net/x8kCZ/15/
you could use something like
<select ng-model="myselect">
<option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
{{o}}
</option>
</select>
using ng-selected you preselect the option in case myselect was prefilled.
I prefer this method over ng-options anyway, as ng-options only works with arrays. ng-repeat also works with json-like objects.
<select ng-model="option" ng-options="o for o in options">
$scope.option will be equal to 'var1' after change, even you see value="0" in generated html
plunker
Related
I have the following dropdown. I want to set All Patients as the default value.
<select [(ngModel)]="searchModel.careprovider">
<option [value]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [value]="user._id.$oid">
{{user.dn}}
</option>
</select>
My model is declared this way:
searchModel: any = { location: null, practice: null, name: '', careProvider: 0 };
I set the practiceUsers this way:
this._practice.getUsers(this.searchModel.practice).subscribe(result => {
this.practiceUsers = result;
this.searchModel.careProvider = 0;
});
No matter how I change it I always just get a blank option as the default. I've tried adding an object to the this.practiceUsers array after it is loaded, then setting the model value. I've tried setting the model value with and without quotes to see if a number or string made a difference. Everything I try still results in the default being the blank option.
In Angular 1 I would have used ng-options, but that is no longer available for Angular 2, and every example I find shows to use the ngFor for dropdowns.
Object attributes are case sensitive, in your object, attribute is called careProvider, but in your template, you are using searchModel.careprovider with lowercase p. I think you also have to use NgValue directive instead of value because you are using NgModel directive. So, this should work: it is not working
<select [(ngModel)]="searchModel.careProvider">
<option [ngValue]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [ngValue]="user._id.$oid">
{{user.dn}}
</option>
</select>
Try to use [selected] attribute. I solved similar problem this way:
<select>
<option *ngFor="let option of options" value="{{option.id}}" [selected]="option === selectedOption">
{{option.name}}
</option>
</select>
I hope this helps a little
<select class="form-control" id="policeid_country_id" name="policeid_country_id" formControlName="policeid_country_id">
<option [ngValue]="null">Select</option>
<option [ngValue]="country.id" *ngFor="let country of countries">{{country.country}}</option>
</select>
I would like to use ng-value="true" and false (boolean) for a select option. But I want to fill the options in php because I am using laravel and the translator. This is my code, and the value is not boolean after I send the form.
<select
id="job-payed"
required
class="form-control"
name="payed"
ng-model="payed">
<option selected disabled value>Please choose..</option>
<option ng-value="true">Payed</option>
<option ng-value="false">Not payed</option>
</select>
if someone still gets that problem, try this :
<select id="job-payed" required class="form-control" name="payed" ng-model="payed">
<option selected disabled value>Please choose..</option>
<option ng-value="{{ true }}">Payed</option>
<option ng-value="{{ false }}">Not payed</option>
</select>
Try to use ng-value="'true'" because ngValue should contain an expression to the value of
If you use ng-value="true" angular will look for variable called true in your scope($scope.true)
See https://docs.angularjs.org/api/ng/directive/ngValue
This works on select boxes as expected starting in Angular 1.6.0. Prior versions' ng-value treat the values as Strings in select boxes.
Angular 1.5.0: https://plnkr.co/edit/G52M9yaAgJjfVj82i3YF?p=preview
Angular 1.6.0: https://plnkr.co/edit/nyI4ENLW1h0z3JuyDYWO?p=preview
Update the version in the plunk to see how the types change:
<script src="//code.angularjs.org/1.5.0/angular.min.js"></script>
I want to make my ng-options element to display only the different value.
So now i have this.
But I want it to display only one by one value.
Example:
<select class="form-control" ng-model="main.singleProductListSelected">
<option value="test_pizza">Pizza Favorites</option>
<option value="test_pizza">Pasta</option>
<option value="test_pizza">Salads</option>
</select>
This is my html code
<select class="form-control"
ng-model="main.singleProductListSelected"
ng-options="singleOrdersProduct.category.name
for singleOrdersProduct in main.singleOrdersProductOptions">
</select>
Can I do this or i have to change the variable result?
Thanks!
<select class="form-control"
ng-model="main.singleProductListSelected"
ng-options="singleOrdersProduct.category.name for singleOrdersProduct in main.singleOrdersProductOptions | unique:'singleOrdersProduct.category.name'">
</select>
add unique: 'your item name here'
I would recommend lodash like library and create a array of unique value to use inside ng-options
inside controller
uniqueNames = _.uniq(_.pluck(main.singleOrdersProductOptions, 'name'))
use this uniqueNames inside select ng-options. Performance wise this would be good option
I've made a simple angular.js example which shows my problem: example
I want to set the start value of the select element to a specific value.
<select name="i" id="i" ng-model="selectedItem">
<option ng-repeat="i in items" value="{{i}}">{{i}}</option>
</select>
The options and the select element get rendered perfectly. But, like in the example, when i set the value in my controller to 6, the selected value on the page is still the first element.
scope.selectedItem = 6;
There are 2 simple buttons which just change the selected value. When you press them the selection change without problems.
EDIT: i updated the jsfiddle and removed unused code and renamed code to make things a bit more clear
EDIT2: I missed to ask if it is possible to fix the second select element too? The different is that this array contains objects instead of numbers.
<select name="o" id="o" ng-model="selectedItem">
<option ng-repeat="o in objects" ng-value="{{o.ID}}">{{o.Text}}</option>
</select>
You should not use ngRepeat to render option elements, it's not supposed to work properly with select and options. Use ngOptions which will work as expected with ngModel:
<select name="i" id="i"
ng-model="selectedItem"
ng-options="i for i in items">
</select>
For the second selectbox which has ngModel bound to ID property of the objects in array, it will be:
<select name="o" id="o"
ng-model="selectedItem"
ng-options="obj.ID as obj.Text for obj in objects">
</select>
Demo: http://jsfiddle.net/d3jf7ueq/9/
I'm new using angularjs and the angular user interface. I'm interested in the tag.
This is my html:
<select id="part1" ui-select2 ng-model="params.id" style="width: 200px;">
<option value="">Provinsi</option>
<option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
ng-selected="v.id == params.id">{{v.text}}</option>
</select>
<select id="part2" ui-select2 ng-model="params2.id" style="width: 200px;" ng-disabled="true">
<option value="">Kabupaten</option>
<option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
ng-selected="y.id == params.id">{{y.text}}</option>
</select>
and this my app.js :
$http.get('json/provinsiData.json').success(function(datax) {
$scope.prov = datax;
});
//part2 data
$http.get('json/acehData.json').success(function(datay) {
$scope.kab = datay;
});
$scope.params = {}
$scope.params2 = {}
As you can see select part2 is disabled.
How can I create an event change that works like the condition below?
if selected option of part1 is index 0
then select part2 disabled = false and load json part2 data.
The angular-js select supports the ng-change attribute which may call any javascript method defined in scope.
Example:
However your best bet may be just to evaluate an $scope expression in your ng-disabled= attribute, e.g. ng-disabled="params.id == 'X'".
With Angular, we usually aren't looking for events to trigger changes. Instead, when the model changes, the view should update to reflect those changes.
In this case, the second element should be enabled (not disabled) depending on a value in the model. When the model value connected to the first select menu satisfies some condition, enable the second menu. Yes, technically there's an event, but we don't need to care about it, all that matters are the model's values.
Here's a simplified example of how this might work:
<select ng-model="selection.item">
<option value="">Clothing</option>
<option ng-repeat="item in clothes">{{ item }}</option>
</select>
<select ng-model="selection.size" ng-disabled="!selection.item">
<option value="">Size</option>
<option ng-repeat="size in sizes">{{ size }}</option>
</select>
The second select menu's ng-disabled attribute is a simple expression which basically evaluates to "disable me if selection.item does not have a value". That could just as easily be a more complex expression or a function.
Here's a plunkr based on the code above