ng-repeat 和 ng-options 之间有什么区别，为什么它们的行为方式不同？答案

【问题标题】：What are the differences between ng-repeat and ng-options and why do they not behave the same way?ng-repeat 和 ng-options 之间有什么区别，为什么它们的行为方式不同？
【发布时间】：2017-07-07 03:48:51
【问题描述】：

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

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

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

这是我认为使用 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'
            ]
        },

【问题讨论】：

使用然后会有相同的行为

标签： angularjs

【解决方案1】：

ng-repeat 为每次迭代创建一个新范围，因此性能不如 ng-options。

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

【讨论】：

【解决方案2】：

来自the documentation：

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

This fiddle 更清楚地说明了这一点： 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;
    }
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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>

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

【讨论】：

【解决方案5】：

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>

【讨论】：