I am using AngularJS (1.5) and im trying to create a select dropdown that can display a different text when selected vs shown in dropdown options
Option example {id: 1, name: 'text', selected: 'this was selected'}
Given the example above, how can i show the name property when they open the dropdown but the selected property after the option is selected?
You have a couple options for dropdowns in angularjs. If you're going the ng-repeat route, then if you have an array of objects structured like your example, then this would work:
<select ng-model="selectedItem">
<option ng-repeat="item in items" value="item.selected"> {{item.name}} </option>
</select>
This will display the "name" in the dropdown, but since value=item.selected, it will assign the "selected" value to your ng-model.
Alternatively, you can do ng-options for the select and something like this would work:
<select ng-model="selectedItem"
ng-options="item.selected as item.name for item in items">
</select>
This does the same thing, but ng-options tends to allow more flexibility as you can assign entire objects to your model rather than just strings like ng-repeat only allows, plus angular claims it's faster.
Hope this helps. See here for more info https://docs.angularjs.org/api/ng/directive/select
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
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];
I want use select in angularjs.
I have a json that every element have 2 part: name and value. I want show name in dropdown and when user select one of theme, value is copy to ng-model.
$scope.list = [{name:"element1",value:10},{name:"element2",value:20},{name:"element3",value:30}];
For this I have 2 way to use select:
ng-options:
I use ng-options like below:
<select ng-model="model.test" ng-options="element.name for element in list"></select>
It's work correctly, but when I select each of element, I want just value of element is copy to ng-model, but a json is copy to ng-model, like below:
$scope.model.test = {name:"element1",value:1}
I can resolve this problem in angular controller, but I want find a better way that resolve this problem.
For resolove this problem, I use second way:
2.use ng-repeat in options:
<select ng-model="model.test">
<option ng-repeat="element in list" value="{{element.value}}">{{element.name}}</option>
</select>
In second way, just value is copy to ng-model, but as a string type:
$scope.model.test = "10";
I use below code, but all of them return a string value to model.
<option ng-repeat="element in list" value={{element.value}}>{{element.name}}</option>
<option ng-repeat="element in list" value="{{element.value}}|number:0">{{element.name}}</option>
<option ng-repeat="element in list" value={{element.value}}|number:0>{{element.name}}</option>
How can fix this problem?
you can resolve it with ng-options as well
ng-options="element.value as element.name for element in list"
please read this blog to understand more about ng-options.
Also another advantage of ng-options is, it binds the object as opposed to json string in case you want to attach the selected object to ng-model.
Have you tried this :
<select ng-model="model.test" ng-options="element.value element.name for element in list"></select>
btw, if you may have hundreds of records into your list, you should create your own directive, where you would manipulate your DOM with a simple javascript for loop
ng-repeat will be slow to be rendered,
ng-options adds every record into $watch.
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
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