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

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

从文档:

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

这个小提琴使得更清楚: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;
    }
}