AngularJS: Select Trong AngularJS | V1Study

AngularJS cho phép ta tạo dropdown list dựa trên các phần tử mảng hay một đối tượng.

Tạo Select Box dùng chỉ thị ng-options

Nếu bạn muốn tạo một dropdown list dựa trên một đối tượng object hoặc một mảng trong AngularJS thì bạn cần dùng chỉ thị 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>

ng-options và ng-repeat

Bạn cũng có thể sử dụng chỉ thị ng-repeat để tạo dropdown list:

Example

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

Vì chỉ thị ng-repeat sẽ lặp một khối mã HTML của mỗi phần tử trong mảng nên nó có thể được sử dụng để tạo các option trong dropdown list, nhưng chỉ thị ng-options đã tạo lại được dùng để điền một dropdown list với các option, điều này sẽ có ít nhất một lợi điểm:

Dropdown được tạo từ ng-options cho phép giá trị được chọn là một object, còn dropdown được tạo bằng ng-repeat lại có dạng string.

Bạn chọn gì?

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

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

Thì chỉ thị ng-repeat có hạn chế là giá trị được chọn phải là một chuỗi:

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>

Khi sử dụng chỉ thị ng-options thì giá trị được chọn có thể là một đối tượng:

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>

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

Chúng ta sử dụng chỉ thị ng-options trong bài viết này.

Nguồn dữ liệu là một Object

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

Giả sử rằng ta có một đối tượng có các cặp key-value như sau:

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

Thì biểu thức trong thuộc tính ng-options hơi khác một chút so với các đối tượng:

Ví dụ

Sử dụng đối tượng như là một nguồn dữ liệu, trong đó x biểu diễn cho key, còn y biểu diễn cho value:

<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 luôn là value trong cặp key-value.

value trong cặp key-value cũng có thể là một đối tượng.

Ví dụ

Giá trị đã chọn sẽ vẫn là value trong cặp key-value, nhưng lần này nó là đố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 option của dropdown list không phải là key trong cặp key-value, nó có thể là value hoặc một thuộc tính của đối tượng value:

Ví dụ

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