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.
Related
I have an array as below:
hunting_lands = {"1":{"name":"forest and rivers"},"2":{"name":"safari"},"3":{"name":"sea"},"4":{"name":"Mountains"}}
I have a select dropdown where I use above json:
<select id="favourite_hunting_land">
<option value ="[[key]]" ng-repeat="(key, value) in hunting_lands">[[value.name]]</option>
</select>
Now I want to show a value selected for example sea:
For this what I tried:
I set hunting land dropdown menu ng-model = fav_hunting_land
$scope.$watch('fav_hunting_land', function() {
$scope.fav_hunting_land = 3;
});
But Then I had other onchange functions which is not working and neither does select dropdown works i.e I am unable to change values.
It worked and show 3 value selected.
All want is to show selected value in select dropdown which populates using ng-repeat.
Update
I am using [[]] for expressions using interpolate.
Use this instead in the HTML
<select id="favourite_hunting_land" ng-model="selectedItem">
<option value ="{{item.name}}" ng-repeat="item in hunting_lands">{{item.name}}</option>
</select> <br>
Value selected is {{selectedItem}}
Use expression
<select id="favourite_hunting_land">
<option value ="key" ng-repeat="(key, value) in hunting_lands">{{value.name}}</option>
</select>
EDIT:
You can set the inital value with ng-init
<select ng-init="selected='3'" ng-model="selected " ng-options="c.key as c.value for c in hunting_lands"></select>
DEMO
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>
<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>
I have an object array in my scope and I list them in a dropdown control like below.
<select ng-model="selectedItem" ng-options="product.ID as product.Name for product in products">
<option value="">Please select a product...</option>
</select>
I also want to get the selectedItem as an object to reach other attributes of the object so I can manupulate the content in my page. For example;
<a ng-show="selectedItem.isAvailable">Buy Now!</a>
Can anyone help me with this? Thank you.
You just need to remove select as part from the ng-options, so that the selected product will be the ngModel, selectedItem.
Try:-
<select ng-model="selectedItem" ng-options="product.Name for product in products track by product.id">
<option value="">Please select a product...</option>
</select>
Your current syntax is select as label for value in array where select is the product.ID, so you would just change it to label for value in array
<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>