ng-repeat和ng-options之间有什么区别？为什么它们的行为方式不一样？

How do ng-options and ng-repeat differ?

ng-options和ng-repeat有何不同？

In the following code, I have an ng-repeat that iterates through a list of people:

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

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

Here is what I believe to be an equivalent select box in using ng-options:

以下是我认为使用ng-options的等效选择框：

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

I would expect them to behave the same, but they do not. Why?

我希望他们表现得一样，但事实并非如此。为什么？

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

5 个解决方案

#1

ng-repeat creates a new scope for each iteration so will not perform as well as ng-options.

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

For small lists, it will not matter, but larger lists should use ng-options. Apart from that, It provides lot of flexibility in specifying iterator and offers performance benefits over ng-repeat.

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

#2

From the documentation:

从文档：

Note: ngOptions provides an iterator facility for the element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present.

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

This fiddle makes the point more clear: select2 will bind to select 1 but not the other way around. Click the buttons and the reason will reveal itself :-)

这个小提琴使得更清楚：select2将绑定到选择1而不是相反。点击按钮，原因将显示自己:-)

HTML

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

JS

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

    $scope.typeofSelectedPerson = function(){
        return typeof $scope.selectedPerson;
    }
}

#3

In many cases, ngRepeat can be used on elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits, such as more flexibility in how the 's model is assigned via the select as part of the comprehension expression, and additionally in reducing memory and increasing speed by not creating a new scope for each repeated instance.

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

#4

ng-options is the directive which is designed specifically to populate the items of a dropdown list. One major advantage using ng-options for the dropdown is, it allows us to pass the selected value to be an object. Whereas, using ng-repeat the selected value can only be string.

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>

By Using the above method, the value of the selectedPerson is always a string.

通过使用上述方法，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>

Here, the value of the selected person is an object so we can print any required field of the object by passing the complete object.

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

#5

ng-repeat give problem while send information back to controller because in general we show name to the user but use ID/Index of the option for backend operations.

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

Simple words- with ng-options you may use complete JavaScript object.

简单的单词 - 使用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>

but with ng-repeat you have to deals with string.

但是使用ng-repeat，你必须处理字符串。

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