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
Related
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>
When I update the model, a select box is not getting updated to the value in the model. The select has all the valid options, however, the value from the model is not being selected. In the code below, the value in the model is "FACEBOOK". The mapping to the model is correct because value from the select box saves correctly. The issue is occurring when I load the model on page display.
Here is the html:
<select
class="form-control"
required
ng-model="channel.channeltype"
ng-options="obj.name for obj in contactchannels track by obj.id">
</select>
The generated html is:
<select ng-options="obj.name for obj in contactchannels track by obj.id">
<option selected="?" value="selected"></option>
<option label="Facebook" value="FACEBOOK">Facebook</option>
<option label="Skype" value="SKYPE">Skype</option>
<option label="Instagram" value="INSTAGRAM">Instagram</option>
</select>
thanks in advance,
Use ng-selected instead of selected. You can make it true and false.
And also show how you are doing in JS file with scope.
If it doesn't work like this, then give ng-change="some_func()" and define that function in JS, $scope.some_func = function() {}
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 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'd like to set the ng-class of a optiones-element as active. Unfortunately it doesn't work.
This is my option-menu:
<select>
<option ng-repeat="item in items">{{item}}</option>
</select>
and the item "one" should be active
<select>
<option ng-repeat="item in items" ng-class="{selected: item=='one'}">
{{item}}
</option>
</select>
It doesn't work. Does anyone know how to set the option tag as active?
An example of how it works is this:
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
Below is the right way "select" works in Angularjs, notice the included ng-model directive, if missing it doesn't work.
<select ng-model="selectedItemId" ng-options="item.id as item.name for item in items">
<option value="">-- choose item--</option>
</select>
to make an item of the list active, just set SelectedItemId variable assigned to ng-model at controller side.
$scope.selectedItemId = 1; //the Id belonging to the option to be selected
I see that you want to loop over the options using ng-repeat and then manually select the right option. It is nicer to use the select directive of Angular in that case:
<select ng-model="selectedItem" ng-options="items"></select>
See https://docs.angularjs.org/api/ng/directive/select for more information.