AngularJS tut 13 : Select Boxes

AngularJS cho phép bạn tạo danh sách thả xuống dựa trên các mục trong một mảng hoặc một đối tượng.

Tạo một hộp chọn bằng cách sử dụng ng-options

Nếu bạn muốn tạo một danh sách thả xuống, dựa trên một đối tượng hoặc một mảng trong AngularJS, bạn nên sử dụng ng-optionschỉ thị:

Thí dụ

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

Hãy tự mình thử »

ng-options so với ng-repeat

Bạn cũng có thể sử dụng ng-repeatchỉ thị để tạo cùng một danh sách thả xuống:

Thí dụ

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

Hãy tự mình thử »

Bởi vì lệnh ng-repeatlặp lại một khối mã HTML cho mỗi mục trong một mảng, nó có thể được sử dụng để tạo các tùy chọn trong danh sách thả xuống, nhưng lệnh ng-optionsnày được tạo ra đặc biệt để điền vào danh sách thả xuống với các tùy chọn.

Tôi sử dụng cái gì?

Bạn có thể sử dụng cả ng-repeatchỉ thị và ng-optionschỉ thị:

Giả sử bạn có một mảng các đối tượng:

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

Thí dụ

Sử dụng ng-repeat:<select ng-model=”selectedCar”>
  <option ng-repeat=”x in cars” value=”{{x.model}}”>{{x.model}}</option>
</select>

<h1>You selected: {{selectedCar}}</h1>Hãy tự mình thử »

Khi sử dụng giá trị làm đối tượng, hãy sử dụng bên ng-valuetrong value:

Thí dụ

Sử dụng ng-repeatnhư một đối tượng:

<select ng-model=”selectedCar”>
  <option ng-repeat=”x in cars” ng-value=”{{x}}”>{{x.model}}</option>
</select><h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>

Hãy tự mình thử »

Thí dụ

Sử dụng ng-options:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select><h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>

Hãy tự mình thử »

Khi giá trị đã chọn là một đối tượng, nó có thể chứa nhiều thông tin hơn và ứng dụng của bạn có thể linh hoạt hơn.

Chúng tôi sẽ sử dụng ng-optionschỉ thị trong hướng dẫn này.

Nguồn dữ liệu như một đối tượng

Trong các ví dụ trước, nguồn dữ liệu là một mảng, nhưng chúng ta cũng có thể sử dụng một đối tượng.

Giả sử bạn có một đối tượng với các cặp khóa-giá trị:

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

Biểu thức trong ng-optionsthuộc tính hơi khác đối với các đối tượng:

Thí dụ

Sử dụng một đối tượng làm nguồn dữ liệu, xđại diện cho khóa và y đại diện cho giá trị:

<select ng-model=”selectedCar” ng-options=”x for (x, y) in cars“>
</select>

<h1>You selected: {{selectedCar}}</h1>

Hãy tự mình thử »

Giá trị đã chọn sẽ luôn là giá trị trong cặp khóa – giá trị .

Các giá trị trong một Key- giá trị Cặp đôi này cũng có thể là một đối tượng:

Thí dụ

Giá trị đã chọn sẽ vẫn là giá trị trong cặp khóa – giá trị , chỉ lần này nó là một đối tượng:

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

Hãy tự mình thử »

Các tùy chọn trong danh sách thả xuống không nhất thiết phải là khóa trong cặp khóa-giá trị, nó cũng có thể là giá trị hoặc thuộc tính của đối tượng giá trị:

Thí dụ

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

Hãy tự mình thử »