如何使 ng-select 正常工作答案

【问题标题】：How to make ng-select work properly如何使 ng-select 正常工作
【发布时间】：2016-10-20 14:19:39
【问题描述】：

我有这个 ng-select 元素：

  <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>

这里是控制器：

  $scope.selectedItem = null;
  $scope.items = [{Name: 'one', Id: 30 },
                  {Name: 'two', Id: 27 },
                  {Name: 'threex', Id: 50 }];

这里正在工作PLUNKER。

在 ng-select 内部，我有两个选项，静态 (-manual-) 和 ng-repeat 元素生成的选项。

我的问题是：当用户选择由 ng-repeat 生成的选项时 $scop.selectedItem获取选中项的Name，而我需要设置选中元素的Id。

例如：

如果在上面的 plunker 中用户从 ng-select 元素中选择 two $scop.selectedItem 将得到 two 项目的名称，而我需要 $scop.selectedItem 来获取 27 的 Id选定的项目。

知道如何让$scop.selectedItem 获取所选项目的Id？

【问题讨论】：

另外，与您的问题无关，您真的不应该将您的属性大写。大写的名字应该保留给类。
其中一个答案是否解决了您的问题？ :)

标签： angularjs

【解决方案1】：

查看ng-options 指令。您可以传递一个列表推导式表达式来提取您需要的内容。

例如：

<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 和 track by 可能会破坏绑定。

【解决方案2】：

正如 Delapouite 所说，您应该使用 ng-options。我已经更新了你的 plunkr 来实现这一点。

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>

【讨论】：

【解决方案3】：

试试这个

 <option ng-repeat="(key, value) in items" key="{{value.Id}}" value="{{value.Id}}">{{value.Name}}</option>

我所做的只是我设置了 key 和 value = {{value.Id}} 并且 selectedItem 会选择它。

这是UPDATED PLNKR

【讨论】：

【解决方案4】：

我建议使用ng-options 并在$scope.items 中推送您的默认值（手动）。

我使用ng-init 将您的选择的默认值设置为-手动-。

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

这是一个working Plnkr。

【讨论】：