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 hộp chọn bằng ng-options
Nếu bạn muốn tạo 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 :
Ví 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ử »tùy chọn ng so với ng-repeat
Bạn cũng có thể sử dụng lệnh ng-repeat để tạo danh sách thả xuống tương tự:
Vì lệnh ng-repeat lặp lại một khối mã HTML cho từng mục trong một mảng nên 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-options được tạo đặ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ả chỉ thị ng-repeat và chỉ thị ng-options :
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"}
];Ví 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 ng-value thay cho value :
Ví dụ
Sử dụng ng-repeat làm đố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ử »Ví 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ị được 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 chỉ thị ng-options trong hướng dẫn này.
Nguồn dữ liệu dưới dạng đố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 thuộc tính ng-options hơi khác một chút đối với các đối tượng:
Ví 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ị được 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:
Ví dụ
Giá trị được chọn sẽ vẫn là giá trị trong cặp khóa- giá trị , chỉ có điều 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ị:
Ví dụ
<select ng-model="selectedCar" ng-options=" y.brand for (x, y) in cars">
</select>
Hãy tự mình thử »