Menu
I am trying to fetch 2 different ids from ng-options object list and map the same into select model on user select. The model is mapped properly but the value is not shown on select box.
http://plnkr.co/edit/Z3ohLie4vpTvXhUiLfl6?p=preview
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Select something</h1>
<select ng-model="selectedItem" ng-options="{'id':item.id,'anotherid':item.anotherId} as item.name for item in items"></select>
<h3>The selected item:</h3>
<pre>{{selectedItem | json}}</pre>
</body>
</html>
The Javascript:
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo', anotherId: 11 },
{ id: 2, name: 'bar', anotherId: 22 },
{ id: 3, name: 'blah', anotherId: 33 }];
});
658
While using the ng-options directive, you can select an object value: We can also use data source as an object. Consider that you have an object with following key-value pairs: The expression in the ng-options attribute is a bit different for objects: The selected value will always be the value in a key-value pair.
Here's more from AngularJS's documentation (if you haven't seen it): When you use ng-options, the values of option tags written out by ng-options will always be the index of the array item the option tag relates to. This is because AngularJS actually allows you to select entire objects with select controls, and not just primitive types.
You should use the ng-option directive to create a dropdown list, based on an object or an array in AngularJS. You can also use the ng-repeat directive to make the same dropdown list as ng-options.
You can do this by adding a simple ng-init that sets the model (from ng-model) to the first element in the items your repeating in ng-options: Note: This could get a little crazy if foo happens to be initialized properly to something "falsy". In that case, you'll want to handle the initialization of foo in your controller, most likely.
You are using a very old version of Angular. If you can use a fairly recent version, the answer is using the track by clause of ng-options:
<select ng-model="selectedItem"
ng-options="{'id':item.id,'anotherid':item.anotherId} as item.name for item in items track by item.id"></select>
Forked plunk: http://plnkr.co/edit/0SwHfYVuYd5iIA9P4mpU?p=preview
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
