Список выбора AngularJS

AngularJS позволяет создавать список выбора на основе элементов массива или объекта.

Создание списка выбора с помощью ng-options

Если вы хотите создать список выбора на основе объекта или массива в AngularJS, следует использовать ng-options Инструкции:

Пример

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
);
</script>

Попробуйте сами

ng-options с ng-repeat

Вы также можете использовать ng-repeat Инструкции для создания того же списка выбора:

Пример

<select>
  <option ng-repeat="x in names">{{x}}</option>
</select>

Попробуйте сами

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

Какую из них следует использовать?

Вы можете использовать ng-repeat Инструкции и ng-options Инструкции:

Предположим, что у вас есть массив объектов:

$scope.cars = [
  {model : "Ford Mustang", color : "red"},
  {model : "Fiat 500", color : "white"},
  {model : "Volvo XC90", color : "black"}
];

Пример

Использование ng-repeat：

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>Вы выбрали: {{selectedCar}}</h1>

Попробуйте сами

Когда используется значение как объект, используйте ng-value заменяет value：

Пример

Параметр ng-repeat В качестве объекта:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>Вы выбрали: {{selectedCar.color}} {{selectedCar.model}}</h1>

Попробуйте сами

Пример

Использование ng-options：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Вы выбрали: {{selectedCar.model}}</h1>
<p>Цвет: {{selectedCar.color}}</p>

Попробуйте сами

Когда выбранным значением является объект, он может содержать больше информации, и ваше приложение может быть более гибким.

Мы будем использовать в этом руководстве: ng-options Инструкции.

Как источник данных объекта

В предыдущем примере данные источника были массивом, но мы также можем использовать объект.

Предположим, что у вас есть объект с парой ключ-значение:

$scope.cars = {
  car01 : "Ford",
  car02 : "Fiat",
  car03 : "Volvo"
};

ng-options Выражения в атрибутах для объекта несколько различаются:

Пример

Использование объекта в качестве источника данныхx 代表键，y 代表值：

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Вы выбрали: {{selectedCar}}</h1>

Попробуйте сами

Выбранное значение всегда будет находиться в паре ключ-значениеЗначение.

В паре ключ-значениеЗначениеЭто также может быть объект:

Пример

Выбранные значения по-прежнему будут находиться в паре ключ-значениеЗначениеВ этот раз это объект:

$scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "red"},
  car02 : {brand : "Fiat", model : "500", color : "white"},
  car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

Попробуйте сами

Опции списка выбора не должны быть ключами пары значенийКлюч它 также может быть значением или свойством объекта значений:

Пример

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

Попробуйте сами