How i get third Column values from $scope.item based on select
$scope.items = [{name: 'one', age: 30, xxx: '15' },{ name: 'two', age: 27,xxx: '12' },{ name: 'three', age: 50,xxx: '16' }];
<p>selected item is : {{selectedItem.xxx}}</p>
<select ng-model="selectedItem" ng-change="selectAction()">
<option ng-repeat="item in items" value="{{item.age}}">{{item.name}}</option>
Just access third element using index
<p>selected item is : {{items[2].xxx}}</p>
You've defined selectedItem as the model of the dropdown, and the value of each option is set to item.age. So, for current selection, $scope.selectedItem will represent age instead of xxx.
If you want to select xxx instead, change the value of the option to xxx:
<option ng-repeat="item in items" value="{{item.xxx}}">{{item.name}}</option>
Now when you select an option in the dropdown, $scope.selectedItem will represent the value of xxx in the corresponding item.
Easiest option would be to use ng-value to assign the whole item object as the value.
<p>selected item is : {{selectedItem.xxx}}</p>
<select ng-model="selectedItem" ng-change="selectAction()">
<option ng-repeat="item in items" ng-value="{{item}}">{{item.name}}</option>
</select>
example in action here: https://plnkr.co/edit/e7j8jkVrVNAo3Ar9sc2q?p=preview
Related
I want to generate an option list using angular expression to achieve
<select id="sel">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
</select>
on selection of which it will return an object or a simple value.
I have data from the server that resembles
this
["string1", "string2", "string3"]
and sometimes this
[
{val: '01', Text: 'struct1'},
{val: '02', Text: 'struct2'},
{val: '03', Text: 'struct3'}
]
and sometimes
[
{id: '01', obj: {grp: 'A', Text: 'struct1'}},
{id: '02', obj: {grp: 'A', Text: 'struct2'}},
{id: '03', obj: {grp: 'A', Text: 'struct3'}}
];
To accomplish the smooth transformation from data objects to a list of selectable objects (options) with one line code, we need to understand how angularJS structure their template!! Here is how ==>
XXX as YYY for ZZZ in ZZZZ
XXX is your final value that you pick from the options
YYY is your value text of your value
ZZZ is one item of your ZZZZ items
From above you can derive various flavors of result from the user's on click on selection. The entire code is like that
HTML==>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<pre>itm for itm in stringArray : Result==> {{L1}}</pre>
<select ng-model="L1" ng-options="itm for itm in stringArray">
<option value="">the strings</option>
</select>
<hr/>
<pre>itm as itm.Text for itm in structArray : Result==> {{L2}}</pre>
<select ng-model="L2" ng-options="itm as itm.Text for itm in structArray">
<option value="">the structs</option>
</select>
<hr/>
<pre>itm.val as itm.Text for itm in structArray : Result==> {{L3}}</pre>
<select ng-model="L3" ng-options="itm.val as itm.Text for itm in structArray">
<option value="">the structs</option>
</select>
<hr/>
<pre>itm as itm.Text for itm in structArray track by itm.val : Result==> {{L4 | json}} </pre>
<select ng-model="L4" ng-options="itm as itm.Text for itm in structArray track by itm.val">
<option value="">the structs</option>
</select>
<hr/>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.stringArray = ["string1", "string2", "string3"];
$scope.structArray =
[
{val: '01', Text: 'struct1'},
{val: '02', Text: 'struct2'},
{val: '03', Text: 'struct3'},
];
});
</script>
</body>
</html>
Notice that I have also inserted a blank option inside the option list after the deploy of objects from that in-line template statement!
Notice that, you can return json object from the select change event. That means, you can expect an object picked by the user from selecting an option inside the list which is very powerful!
Why this code doesn't work as expected? I expect China be selected in the select but it is empty.
<div ng-app="app">
<div ng-controller="appController" class="p-2" ng-init="init()">
<select
name="user_country"
class="form-control"
ng-model="country"
ng-options="item.id as item.title for item in countries track by item.id">
<option value="" disabled>Select Country</option>
</select>
</div>
</div>
Controller:
var app = angular.module('app', []).controller('appController', ['$scope', function($scope){
$scope.country = 3
$scope.countries = [
{id: 1, title: 'US'},
{id: 2, title: 'Japan'},
{id: 3, title: 'China'},
{id: 4, title: 'Russia'}
]
}])
I expect to see China rather than an empty field. Here is a CodePen example https://codepen.io/grinev/pen/YJERvz.
Udpated the ng-options to
ng-options="item.id as item.title for item in countries">
Answer
without track By - JSFiddle
with track By - JSFiddle
track by just helps Angular internally with array sorting as far as I know. 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.id as item.name for item in items
You need to be storing the object, not the id. So instead of $scope.country = 3; you need to put it after the countries array and set it to $scope.country = $scope.countries[2];
I have this ng-select element:
<body ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-model="selectedItem">
<option value="-1" selected>- manual -</option>
<option ng-repeat="(key, value) in items">{{value.Name}}</option>
</select>
</body>
Here is controller:
$scope.selectedItem = null;
$scope.items = [{Name: 'one', Id: 30 },
{Name: 'two', Id: 27 },
{Name: 'threex', Id: 50 }];
Here is working PLUNKER.
Inside of ng-select I have two options the static(-manual-) and the options generated by ng-repeat element.
My problem is: when user make selection of the option generated by ng-repeat the
$scop.selectedItem get the Name of the selected item, while I need to set the Id of the selected element.
For example:
If in the plunker above user select from ng-select element two the $scop.selectedItem will get two the name of the item while, I need $scop.selectedItem to get 27 the Id of the selected item.
Any idea how can I make $scop.selectedItem to get the Id of the selected item?
Have a look at the ng-options directive. You can pass a list comprehension like expression to extract what you need.
For example:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
https://docs.angularjs.org/api/ng/directive/ngOptions
As Delapouite said, you should use ng-options. I've updated your plunkr to implement this.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [{name: '- manual -', id: -1 },
{name: 'one', id: 30 },
{name: 'two', id: 27 },
{name: 'threex', id: 50 }];
$scope.selectedItem = $scope.items[0];
});
<select
ng-model="selectedItem"
ng-options="item.name for item in items track by item.id"
></select>
Try this
<option ng-repeat="(key, value) in items" key="{{value.Id}}" value="{{value.Id}}">{{value.Name}}</option>
All that I have done is I have set key and value = {{value.Id}} and the selectedItem will pick it up.
Here's the UPDATED PLNKR
I would suggest to use ng-options and to push your default value (manual) in $scope.items.
I used ng-init to set the default value of your select to - manual -.
<body ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="i.Id as i.Name for i in items" ng-init="selectedItem = items[0].Id"></select>
selected item: {{selectedItem}}
</body>
$scope.items = [{Name:'- manual -', Id: -1},
{Name: 'one', Id: 30 },
{Name: 'two', Id: 27 },
{Name: 'threex', Id: 50 }];
Here is a working Plnkr.
I want to create a select tag with 'selected' value. I am doing this with ng-repeat since I cannot add a custom directive to ng-options. This is the code.
<select class="ng-valid ng-dirty" ng-model="selectedCity">
<option ng-repeat="city in allCities" value="{{city.id}}" after-render-cities>{{city.name}}</option>
</select>
This adds an extra option with value =?string:1? which I searched a lot. Since ng-options solves this issue, I however have to add the directive after-render-cities for each option. How can I solve this issue?
Use this
<select class="ng-valid ng-dirty" ng-model="selectedCity" ng-options="city.id as city.name for city in allCities">
</select>
for selection of first value, write following code in your controller
$scope.selectedCity = $scope.allCities[0].id;
use ng-init for solve value =?string:1?
<select class="ng-valid ng-dirty" ng-model="selectedCity" ng-init='selectedCity=allCities[0].id'>
<option ng-repeat="city in allCities" value="{{city.id}}" after-render-cities>{{city.name}}</option>
</select>
another choice you can use ng-selected fiddle
<option ng-repeat="(key,city) in allCities" ng-selected='key==0' value="{{city.id}}" after-render-cities>{{city.name}}</option>
</select>
You can create a custom directive, using select and ng-options.
Snippet:
JS:
template: "<select ng-options='item.id as item.name for item in list' ng-model='data'></select>",
HTML:
<div select-option list="list" ng-model='data'></div>
Refer to the demo here.
Try this code
Java Script
var app = angular.module('myApp', []);
app.controller('SampleController', function ($scope) {
$scope.Cities = [
{ Id: 1, Name: "New York" },
{ Id: 2, Name: "Colombo" },
{ Id: 3, Name: "Real Madrid" },
{ Id: 4, Name: "Bostan" },
{ Id: 5, Name: "Birmingham" }
];
$scope.City= 3;
});
HTML
<select ng-options="C.Id as C.Name for C in Cities" ng-model="City"></select>
Read This Blog, it has everything explained.
I have a select box that is populated using ng-options.
$scope.items = [
{ID: '2012', Title: 'Chicago'},
{ID: '2013', Title: 'New York'},
{ID: '2014', Title: 'Washington'},
];
<select ng-model="selectedItem" ng-options="item.ID as item.Title for item in items | filter:filterItemNames">
</select>
This returns...
<option value="2012">Chicago</option>
<option value="2013">New York</option>
<option value="2014">Washington</option>
I would like to filter and display multiple items based on their name (i.e. New York and Chicago).
I'm currently trying to use an array with item names to filter, but this is not working.
$scope.filterItemNames = ['New York', 'Chicago'];
In this case you could create custom filter function:
$scope.filterByNames = function(el) {
return !$scope.filterItemNames || $scope.filterItemNames.indexOf(el.Title) > -1;
};
and use it like this in HTML:
<select ng-model="selectedItem"
ng-options="item.ID as item.Title for item in items | filter:filterByNames">
</select>
Demo: http://plnkr.co/edit/lqiMIlEYdrLlS6K0H2g9?p=preview