Hộp chọn AngularJS
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 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 lệnh ng-options:
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>
tùy chọn so với lặp lại
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>
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>
Khi sử dụng giá trị làm đối tượng, hãy sử dụng ng-valuebên trong 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>
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>
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 có một chút khác biệt đố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>
Giá trị đã chọn sẽ luôn là giá trị trong cặp khóa - giá trị .
Giá trị trong cặp khóa - giá trị 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"}
};
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>