Question

我有这个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才能获得{ {1}}所选项目的27。

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

Answer 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

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

Answer 3

试试这个

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

我所做的就是设置键和值= {{value.Id}}，并且selectedItem会选择它。

这是UPDATED PLNKR

Answer 4

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

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

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

如何使ng-select正常工作

4 个答案: