AngularJS 下拉框

AngularJS 允许您基于数组或对象中的项目创建下拉列表。

使用 ng-options 创建下拉框

如果您想在 AngularJS 中基于对象或数组创建下拉列表，应该使用 ng-options 指令：

Halimbawa

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

Subukan ang sarili

ng-options 与 ng-repeat

您也可以使用 ng-repeat 指令来创建相同的下拉列表：

Halimbawa

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

Subukan ang sarili

由于 ng-repeat 指令为数组中的每个项目重复一段 HTML 代码，因此它可用于在下拉列表中创建选项，但是 ng-options 指令是专门为下拉列表填充选项而设计的。

应该使用哪一个？

您可以使用 ng-repeat 指令和 ng-options 指令：

Ang haka-haka, mayroon kang isang array ng object:

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

Halimbawa

Gamit ng-repeat:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>Pinili mo: {{selectedCar}}</h1>

Subukan ang sarili

Kung ginagamit ang halaga bilang object, gamit ng-value saan ang value:

Halimbawa

Pagpalit ng ng-repeat Ginagamit bilang object:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>Pinili mo ang isang {{selectedCar.color}} {{selectedCar.model}}</h1>

Subukan ang sarili

Halimbawa

Gamit ng-options:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Pinili mo: {{selectedCar.model}}</h1>
<p>Ang kanyang kulay ay: {{selectedCar.color}}</p>

Subukan ang sarili

Kung ang piniling halaga ay isang object, maaari itong magkaroon ng mas maraming impormasyon at ang iyong application ay mas mabisa.

Ginagamit natin sa tutorial na ito ng-options Directive.

Bilang pinagkukunan ng object

Sa nakaraang halimbawa, ang pinagkukunan ng datos ay array, ngunit maaari rin natin gamitin ang object.

Ang haka-haka, mayroon kang isang object na may key-value pair:

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

ng-options Ang ekspresyon sa mga attribute ay kaiba para sa object:

Halimbawa

Gamit ang object bilang pinagkukunan ng datos,x Pangwakas ng key,y Pangwakas ng halaga:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Pinili mo: {{selectedCar}}</h1>

Subukan ang sarili

Ang napiling halaga ay magiging bahagi ng key-value pair palaging.halaga.

Ang napiling halaga ay magiging bahagi ng key-value pair pa rin.halagaMaaari rin itong maging isang object:

Halimbawa

Ang napiling halaga ay magiging bahagi ng key-value pair pa rin.halagasa tingin namin, ito ay isang bagay:

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

Subukan ang sarili

Ang mga opsyon sa dropdown list ay hindi dapat maging klave sa pares ng halagaKlavemaaaring ito ay halimbawa, o isang atrubuto ng bagay na may halaga:

Halimbawa

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

Subukan ang sarili