Question

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'
            ]
        },

Answer 1

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

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

Answer 2

来自the documentation：

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

This fiddle更清楚地说明了这一点： select2将绑定到选择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;
    }
}

Answer 3

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

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

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

Answer 5

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

简单的字词 - 使用 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 你需要处理字符串。

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

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

5 个答案: