<select ng-model="sortOrder">
<option value="country">Country (A-Z)</option>
<option value="-country">Country (Z-A)</option>
</select>
controller:
$scope.sortOrder = ['-country', 'name'];
I have it set up something like this. It works otherwise but the select option by default is just empty. I would like the first option to be selected by default or even just some text there.. basically anything but an empty dropdown. How can I accomplish that?
You should use ng-options
<select ng-model="selectedItem" ng-options=" item.name for item in items"></select>
now to set the default option while creating list of items or If you are getting item list dynamically than you can assign the first item as a default item such
$scope.items = [{'name': 'Select Item'},
{'name' : 'Google Calendar'},
{'name' : 'Jira'},
{'name' : 'Zendesk'}];
//This will set the default item as selected.
$scope.selectedItem = $scope.items[0];
Let me know if its still not clear.
You can use "selected" attribute for <option> on init:
<select ng-model="selecteditem">
<option ng-repeat="item in items" value="{{item}}" {{item===selecteditem ? 'selected' : ''}}></option>
</select>
Related
Using ng-model and ng-options properties I bind select html tag.
It properly bind all the data in options BUT one empty option is bind at first with " ".
I want to remove this empty option using angular
<select class="ng-pristine UserGroups selectGroupClass" ng-model='groupList' required ng-options='item.name for item in groupOptions track by item.name'></select>
$scope.groupOptions = [{
name: "What's Hot",
value: 'latest'
}, {
name: 'Trending',
value: 'popular'
}];
The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options.
If you want to remove this empty option using angular select an initial value in your controller,
$scope.groupList = $scope.groupOptions[0];
Please check working example : Here
OR
You can add
<option style="display:none" value="">select a type</option>
In HTML
<select class="ng-pristine UserGroups selectGroupClass" ng-model='groupList' required ng-options='item.name for item in groupOptions track by item.name'>
<option ng-hide="true" value="">Select a Type</option>
</select>
Please check working example here : Demo for 2nd option
track by just helps Angular internally with array sorting and prevent duplicated items in array. The value of the options is defined by the first argument (in your case item). If you want it to be by id then you should use item as item.name for item in groupOptions
one of the items has a blank name is what I can think of! Just verify that if possible.. Use item.someOtherproperty for item if possible to debug that :)
Try this solution
<select ng-model="selected" ng-options="item as item.name for item in groupOptions">
<option value="">Choose</option>}
</select>
<div data-ng-bind="selected.name"></div>
I am trying to add a default option to a select with angular but it adds a blank option which strangely disappears when I select it.
I am getting the object to bind to the select using ng-options like this. I am appending a default option like this:
var DocumentSearchController = function (documentsService) {
documentsService.getDocTypes().then(function (results) {
this.documentTypes = results.data;
this.documentTypes.unshift({ DocumentTypeID: null, Name: 'Select a Document Type' });
}.bind(this));
The structure of the objects is:
[{DocumentTypeID: 1, Name: 'Blah'}]
I then use ng-options to bind the objects:
<select class="form-control"
id="documentTypeSelector"
name="documentTypeSelector"
ng-model="vm.selectedDocumentType"
ng-options="option.Name for option in vm.documentTypes | orderBy: 'option.DocumentTypeID':false track by option.DocumentTypeID">
</select>
Then annoying this is that a blank option is strangely added that is removed when I select an item.
The options are also not ordered so I suspect my list comprehension is wrong.
To define a default <select> element just assign to ng-model binded variable a default value available in one <option> element (or value).
In your case vm.selectedDocumentType should be set to a vm.documentTypes[theIndexYouChoose].DocumentTypeID
More in general a simplified example could be
// given $scope.options = [1, 2, 3];
<select ng-init="selectedOption=1" ng-option="option for option in options" ng-model='selectedOption'>
</select>
You will find no empty options and the selected option will be 1
You can add an default value this way :
<select class="form-control"
id="documentTypeSelector"
name="documentTypeSelector"
ng-model="vm.selectedDocumentType"
ng-options="option.Name for option in vm.documentTypes | orderBy: 'option.DocumentTypeID':false track by option.DocumentTypeID">
<option value="">Select a Document Type</option>
</select>
Edit Or using init function
<select class="form-control"
ng-init="vm.selectedDocumentType= vm.documentTypes[0]"
id="documentTypeSelector"
name="documentTypeSelector"
ng-model="vm.selectedDocumentType"
ng-options="option.Name for option in vm.documentTypes | orderBy:'option.DocumentTypeID':false track by option.DocumentTypeID">
</select>
I have the following select
<select ng-change="onChange(item)" ng-model="item.Probability" ng-options="item as item.text for item in Probability">
</select>
I can select from different items inside an array called Probability.
Probability:
$scope.Probability = [{text: '', value: },
The item is displayed to the user as item.text, but is saved in ng-model as just item (as you can see in my select)
When I want to edit this item (sometime after it is saved), I would like to display Probability.text as already chosen inside the select, but since the model is set to Probability (with .value and .text) my select is just blank.
How can I display item.Probability as item.Probability.text, and writing it like that inside the model did not work.
<select ng-change="onChange(item)" ng-model="item.Probability" ng-options="item.value as item.text for item in Probability">
<option value="">What's your probability</option>
</select>
in this way, $scope.item.Probability would equal to the item.value you select
This did not work:
<select ng-change="onChange(item)" ng-model="item.Probability" ng-options="item as item.text for item in Probability">
</select>
But this did:
<select ng-change="change(item, editable.ID)" ng-model="item.Probability" ng-options="item as item.text for item in Probability">
<option style="display:none" value="" disabled>{{item.Probability.text}}</option>
</select>
This will put an extra option ontop of my Probability options, this option is shown like 'item.probability.text', but doesn't have a value, hence it's disabled. But it shows the user what the value currently is.
I have html code like this
<select id="userGroups" name="userGroups" ng-model="userGroups" required class="form-control">
<option value="{{grp.groupId}}" ng-repeat="grp in groups">{{grp.groupName}}</option>
</select>
and in my controller I want to set the default value but its not working
function CreateUserController($scope, grpList) {
$scope.groups = grpList.groupList; //it is loading correctly and dropdown is populating correctly
$scope.userGroups = "2";
}
I am trying to set the userGroups value to 2, but its always showing the first option in select
The best bet here is to use ng-options:
<select ng-model="userGroups"
ng-options="group.groupId as group.groupName for group in groups">
</select>
Fiddle
<select ng-model="item.value" ng-options="item.name for item in items">
</select>
The above will populate select option in AngularJS, but how can I add selected if my condition is met?
I want to do something like this:
<select ng-model="item.value" ng-options="item.name for item in items" if="item.name == someValueToCheckAgainst" selected endif>
</select>
Obviously the above is wrong, but I was trying to search for this to see if it is possible to do.
This is items
var items = [ 'a', 'b', 'c' ];
var someValueToCheckAgainst = 'b';
so my menu should be like this
<select ng-model="item.value">
<option value="a">a</option>
<option value="b" selected>a</option>
<option value="c">a</option>
</select>
Just figured this out
<select ng-model="form.model">
<option ng-selected="{{item == valueToCheckAgainst}}"
ng-repeat="item in items"
value="{{item}}">
{{item}}
</option>
</select>
For me this statement makes no sense.
<select ng-model="item.value" ng-options="item.name for item in items"> </select>
ng-model is current value (bound model). If your 'item' looks like ’{ value, name }' than you should define your 'select' as
<select ng-model="someValueToCheckAgainst" ng-options="item.value as item.name for item in items"> </select>
The selected option is defined by the value of the ng-model attribute. For further information you can take a look at the official documentation https://docs.angularjs.org/api/ng/directive/select.
I recommend to use ng-option directive instead of ng-repeat for select boxes, beacuse ng-option is specifically created for select box and handles options in best way. And how we can set a default or conditional option value selected in ng-option directive is using ng-init directive with it like this:
<select ng-model="item.value"
ng-options="item.name for item in items"
ng-init="condition ? item.value = items[opt index] : item.value = items[0]">
</select>