25

怎么做ng-options和ng-repeat区别？

在下面的代码中，我有一个ng-repeat遍历人员列表的代码：

 <select ng-model="selectedPerson" >
          <option ng-repeat="obj in people" value="{{obj.id}}">{{obj.name}}</option>
  </select>

这是我认为在 using 中等效的选择框ng-options：

 <select ng-model="selectedPerson" ng-options='obj.name for obj in people'></select>

我希望他们表现得一样，但他们没有。为什么？

$scope.people = [
        {
            id: 0,
            name: 'Leon',
            music: [
                'Rock',
                'Metal',
                'Dubstep',
                'Electro'
            ]
        },
4

5 回答 5

26

ng-repeat 为每次迭代创建一个新范围，因此不会像 ng-options 那样执行。

对于小列表，没关系，但较大的列表应该使用 ng-options。除此之外，它在指定迭代器方面提供了很大的灵活性，并提供了优于 ng-repeat 的性能优势。

于 2013-10-24T06:52:53.797 回答
10

从文档中：

注意：ngOptions 为元素提供了一个迭代器工具，当您希望将选择模型绑定到非字符串值时，应该使用该工具而不是 ngRepeat。这是因为选项元素目前只能绑定到字符串值。

这个小提琴使这一点更清楚： select2 将绑定到 select 1 但不是相反。点击按钮，原因就会显现出来:-)

HTML

<div ng-app ng-controller="MyCtrl">
  <select ng-model="selectedPerson" >
    <option ng-repeat="obj in people" value="{{obj.id}}">
      {{obj.name}}
    </option>
  </select>
  <select ng-model="selectedPerson" 
    ng-options="p.id as p.name for p in people">
  </select>
  selected: {{selectedPerson}} {{typeofSelectedPerson()}}
    <button ng-click="selectedPerson=2">Jao</button>
    <button ng-click="selectedPerson='1'">Ze</button>
</div>

JS

function MyCtrl($scope){
    $scope.selectedPerson = 1;
    $scope.people = [
        {
            id: 1,
            name: 'Ze'
        },
        {
            id: 2,
            name: 'Jao'
        }
    ];

    $scope.typeofSelectedPerson = function(){
        return typeof $scope.selectedPerson;
    }
}
于 2014-03-05T04:10:48.780 回答
3

在许多情况下，可以在元素上使用 ngRepeat 而不是 ngOptions 来实现类似的结果。但是，ngOptions 提供了一些好处，例如在如何通过 select 作为理解表达式的一部分分配 's 模型时具有更大的灵活性，另外还可以通过不为每个重复实例创建新范围来减少内存和提高速度。

于 2015-08-31T11:01:29.677 回答
3

ng-options 是专门设计用于填充下拉列表项目的指令。将 ng-options 用于下拉列表的一个主要优点是，它允许我们将选定的值作为对象传递。而使用 ng-repeat 选择的值只能是字符串。

<select ng-model="selectedPerson" >
      <option ng-repeat="obj in people" value="{{obj.id}}">{{obj.name}}</option>
</select>
<h1> Id of the selected item is : {{selectedPerson}}</h1>

通过使用上述方法， selectedPerson 的值始终是一个字符串。

<select ng-model="selectedPerson" ng-options='obj.name for obj in people'></select>
 <h1> Id of the selected item is : {{selectedPerson.id}}</h1>
 <h1> Name of the selected item is : {{selectedPerson.name}}</h1>

在这里，所选人员的值是一个对象，因此我们可以通过传递完整的对象来打印对象的任何必填字段。

于 2017-05-25T15:23:29.873 回答
2

ng-repeat 在将信息发送回控制器时会出现问题，因为通常我们向用户显示名称，但使用选项的 ID/Index 进行后端操作。

简单的话- 使用ng-options您可以使用完整的JavaScript 对象。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x.name for x in names">
</select>
<!--It will display complete object-->
{{selectedName}}
<!--It will display object's age-->
{{selectedName.age}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [{"name":"Neeraj","age":"21"},    {"name":"John","age":"22"},     {"name":"David","age":"23"}];
});
</script>

</body>
</html>

但是使用ng-repeat你必须处理string。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName">
<option ng-repeat="x in names">{{x.name}}</option>
</select>
<!--It will display only selected name not complete object-->
{{selectedName}}
<!--It won't work-->
{{selectedName.age}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [{"name":"Neeraj","age":"21"},{"name":"John","age":"22"},{"name":"David","age":"23"}];
});
</script>

<p>This example shows how to fill a dropdown list using the ng-repeat    directive.</p>

</body>
</html>
于 2017-02-07T07:53:02.317 回答