angularjs ng-options select as custom object from the options array

Question

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 }];
});

Nikos Paraskevopoulos · Accepted Answer · 2014-08-06 19:02:23Z

8

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

answered Aug 6, 2014 at 19:02

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maxim Shoustin Over a year ago

I really don't understand why simple select is so complicated. Anyways +1 for right answer but I would try to find out more simple solution :)

Dan Doyon Over a year ago

I agree that the comprehension stuff in selects is overly complicated and underly explained.

Collectives™ on Stack Overflow

angularjs ng-options select as custom object from the options array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related