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

发布时间：2020-12-17 17:20:24 所属栏目：安全来源：网络整理

导读：我试图从ng-options对象列表中获取2个不同的id,并将其映射到用户select上的select模型中.模型已正确映射,但该值未显示在选择框中. http://plnkr.co/edit/Z3ohLie4vpTvXhUiLfl6?p=preview !DOCTYPE html html ng-app="angularjs-starter" head lang="en" meta

我试图从ng-options对象列表中获取2个不同的id,并将其映射到用户select上的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 }];
});

解决方法

您使用的是非常旧版本的Angular.如果您可以使用相当新版本,答案是使用ng-options的track by子句：

<select ng-model="selectedItem"
  ng-options="{'id':item.id,'anotherid':item.anotherId} as item.name for item in items track by item.id"></select>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!