Каковы различия между ng-repeat и ng-options и почему они не ведут себя одинаково?

Чем отличаются 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'
            ]
        },

Ответы

Ответ 1

ng-repeat создает новую область для каждой итерации, поэтому не будет выполняться так же, как ng-options.

Для небольших списков это не имеет значения, но в больших списках должны использоваться ng-options. Кроме того, он обеспечивает большую гибкость в определении итератора и предлагает преимущества производительности по сравнению с ng-repeat.

Ответ 2

Из документация:

Примечание. ngOptions предоставляет средство итератора для элемента, который должен использоваться вместо ngRepeat, когда вы хотите, чтобы модель выбора была привязана к нестрочному значению. Это связано с тем, что элемент option может привязываться только к строковым значениям.

Эта сценария дает понять более четко: 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>

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 как часть выражения понимания, а также в уменьшении памяти и увеличении скорости, не создавая новую область для каждого повторяющегося экземпляра.

Ответ 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 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>