angularjs ng-options从options数组中选择自定义对象

时间:2014-08-06 18:54:01

标签: angularjs ng-options

我正在尝试从ng-options对象列表中获取2个不同的ID,并将其映射到用户选择的select模型中。模型已正确映射,但该值未显示在选择框中。

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>

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

1 个答案:

答案 0 :(得分:7)

您使用的是非常古老的Angular版本。如果您可以使用相当新版本,答案是使用track by的{​​{1}}子句:

ng-options

叉子:http://plnkr.co/edit/0SwHfYVuYd5iIA9P4mpU?p=preview