In the form I have a drop down list with multiple choice, as shown below. Elements are loaded from the database.
<label>Items</label>
<select class="form-control m-b"
ng-model="model.livingComplexId"
x-ng-change="updateOne(model.livingComplexId)">
<option></option>
<option ng-repeat="itemOne in itemsForAddrLevelOne"
value="{{itemOne.id}}">{{itemOne.tobName}}</option>
</select>
I make choose.
For example, I choose an item2.
Then save data. Then, I open the form to edit and I want to see an item that I chose, but the list is empty...
How can I set the previously selected value?
I would recommend to use the ngOptions directive to generate the select menu options:
<select ng-model="model.livingComplexId" ng-options="itemOne.id as itemOne.tobName for itemOne in itemsForAddrLevelOne"></select>
Maybe you could additionally change the ng-model value to model and use ng-options="itemOne as ..." (without the .id) and add an track by itemOne.id.
<select ng-model="yourModel" ng-options="itemOne.tobName for itemOne in itemsForAddrLevelOne"></select>
In the js you should set $scope.yourModel = itemsForAddrLevelOne[0];
Related
I want to bind a model value to selected item
<select id="hours" ng-model="v.T_Hour">
<option ng-repeat="n in [].constructor(24) track by $index" ng-selected="{{$index==v.T_Hour}}" value="{{$index}}">{{$index>9?$index:"0"+$index}}:00</option>
</select>
I want after the page loads , the value of the model 'v.T_Hour' to be selected in select , i assign the value of the model in the controller, when i view the resulting HTML i see that the value is selected in the HTML code ,but not selected in the select control , and the select control displays an empty item.
Try this
<select
name="name"
id="id"
ng-options="option.name for option in v.data track by option.value"
ng-model="v.selected"
class="form-control inline-forms">
<option value="" selected>{{placeHolder}}</option>
</select>
and in controller
$scope.v = {data:[], selected:{}, placeHolder:""}
$scope.v.data = [{name:"nameOne", value:"valueOne"},{name:"nameTwo", value:"valueTwo"},{name:"nameThree", value:"valueThree"}]
$scope.v.selected = $scope.v.data[0]
$scope.v.placeHolder = "Click to Select"
According Angular documentation ngOption is better way to go than ngRepeat:
Choosing between ngRepeat and ngOptions
In many cases, ngRepeat can be used on elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits:
more flexibility in how the 's model is assigned via the select as part of the comprehension expression
reduced memory consumption by not creating a new scope for each repeated instance
increased render speed by creating the options in a documentFragment instead of individually
Specifically, select with repeated options slows down significantly starting at 2000 options in Chrome and Internet Explorer / Edge.
see: https://docs.angularjs.org/api/ng/directive/select
I have a <select> element populated with the acceptable values via ng-options and bound to a model with ng-model. It is possible that the model is set to a value that is not acceptable. (It used to be acceptable but no longer is.) In this case AngularJS renders the <select> as if it had an empty item selected.
Is there a way to have it render the selected value even if it is not listed in ng-options? I know I can put a default <option> inside the <select>. It's better than displaying an empty item, but it's a static string. I'd like to have the invalid value displayed.
Interesting problem. I think that you will be able to achieve this with the combination of ngInit directive to set up initial value (it can be missing from the allowed options list) and ngShow to hide it once valid option is selected.
Something like this:
<select
ng-init="preselected = selected"
ng-change="preselected = null"
ng-model="selected"
ng-options="item.id as item.name for item in items">
<option value="" ng-show="preselected">{{preselected}}</option>
</select>
Demo: http://plnkr.co/edit/lUTR0pHDPecU0OUUwjzt?p=preview
I am using ng-repeat on option in select.
<select ng-model="mymodel">
<option ng-repeat="p in persons" value="{{p.id}}">{{p.name}}</option>
</select>
$scope.persons= [
{id:1,name:"tester11"},
{id:2,name:'tester22'},
{id:3,name:'tester33'},
{id:4,name:'tester44'}
];
How can I make an option selectable means by default "tester33" should be selected
through use of ng-model.
I know it is achievable through ng-options. But I want to try this one.
Thanks in advance.
There is no perfect way to achieve this using ng-repeat, but here's a workaround:
<select ng-model="mymodel">
<option ng-repeat="p in persons" ng-selected="p.name=='tester33'" value="{{p.id}}">{{p.name}}</option>
</select>
This just sets the option with name='tester33' but the model won't get updated until the user changes select value explicitly
NOTE: This is not a recommended way, you must use ng-options for complete functionality
I use AngularJS and bind a <select> to my model:
<select ng-model="model.something" ng-options="..." >
<option></option>
</select>
It leaves one empty element on top of dropdown, and then generates other options from my view-model.
These things work great:
1. I choose option from dropdown, it is bound to model.something.
2. I choose empty option, model.something is set to null.
3. I set model.something in another function, the correct option is selected.
What does not work:
- I set model.someting to null in another function, empty option is not selected, the previous value is still selected.
How to "tell" Angular to select empty option, if I bind model to null value?
Change <option></option> to <option value=""></option> and set model.someting to empty string "".
UPDATE
Here is a working JSFiddle:
http://jsfiddle.net/DianaNassar/6kLW6/
In Angular, I want what displays in the select to be a combination of two properties from the object in the array. For example, I have auctionName and auctionLocation on the item and I want the text in the display to appear like auctionLocation-auctionName.
<select ng-model="selectedAuction" ng-options="item.auctionLocation as item.auctionLocation for item in auctions">
<option value="" disabled selected>All Auctions</option>
</select>
values can be concatenated inside ng-options.
For your case you can use:
ng-options="item.auctionLocation as item.auctionName+'-'+item.auctionLocation for item in auctions"
Demo: http://plnkr.co/edit/uqoe0Hx4f0mOlU1f1wRE?p=preview