[AngularJS] Phần 13: Select/Dropdown trong AngularJS

AngularJS cho phép tạo danh sách dropdown dựa trên các phần tử trong mảng, hay 1 đối tượng.

Tạo một select box dùng ng-options
Nếu bạn muốn tạo 1 danh sách dropdown, dựa trên 1 đối tượng hay 1 mảng trong AngularJS, bạn nên dùng chỉ thị ng-options.

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<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 = ["Johnson", "Trang", "Andy"];
});
</script>

<p>Đây là ví dụ chỉ ra cách điền 1 danh sách dropdown dùng chỉ thị ng-options --- dammio.com</p>

</body>
</html>

Chỉ thị ng-options với ng-repeat
Bạn có thể dùng chỉ thị ng-repeat để tạo cùng 1 danh sách dropdown:

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

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

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Dammio", "Tom", "Johnson"];
});
</script>

<p>Đây là ví dụ chỉ ra cách điền 1 danh sách dropdown dùng chỉ thị ng-repeat --- dammio.com</p>

</body>
</html>

Vì chỉ thị ng-repeat lặp lại 1 khối mã HTML cho mỗi phần tử trong mảng cho nên nó có thể dùng để tạo các tùy chọn (options) trong 1 danh sách dropdown. Tuy nhiên, chỉ thị ng-options đặc biệt dùng để tạo 1 danh sách dropdown với các tùy chọn, và có ít nhất 1 lợi ích quan trọng. Đó là dropdown dùng ng-options cho phép giá trị được chọn trở thành 1 đối tượng, trong khi đó dropdown dùng ng-repeat chỉ là kiểu chuỗi.

Cách sử dụng
Giả sử bạn có 1 mảng đối tượng:

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

Chỉ thị ng-repeat có các giới hạn và giá trị được chọn phải là kiểu chuỗi.

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>Chọn 1 chiếc xe:</p>

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

<h1>Bạn chọn: {{selectedCar}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = [
        {model : "Toyota 1242", color : "blue"},
        {model : "Lexus 700", color : "pink"},
        {model : "Mazda RE10", color : "gray"}
    ];
});
</script>

<p>Khi dùng chỉ thị ng-repeat để tạo danh sách dropdown, giá trị được chọn phải là kiểu chuỗi. --- dammio.com</p>
<p>Trong ví dụ trên, bạn phải chọn giữa color và model để làm giá trị được chọn.</p>

</body>
</html>

Khi dùng chỉ thị ng-options, giá trị được chọn phải là kiểu đối tượng.

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>Chọn 1 chiếc xe:</p>

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>

<h1>Bạn chọn: {{selectedCar.model}}</h1>
<p>Màu xe được chọn là: {{selectedCar.color}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = [
        {model : "Toyota 1242", color : "blue"},
        {model : "Lexus 700", color : "pink"},
        {model : "Mazda RE10", color : "gray"}
    ];
});
</script>

<p>Khi dùng chỉ thị ng-repeat để tạo danh sách dropdown, giá trị được chọn phải là kiểu chuỗi. --- dammio.com</p>
<p>Trong ví dụ trên, bạn phải chọn giữa color và model để làm giá trị được chọn.</p>

</body>
</html>

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

Liên quan: Năm lý do nên học AngularJS

Nguồn dữ liệu là 1 đối tượng
Trong ví dụ trước, nguồn dữ liệu là 1 mảng, nhưng chúng ta có thể dùng 1 đối tượng là nguồn dữ liệu. Giả sử bạn có 1 đối tượng các cặp key-value (khóa-giá trị).

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

Diễn giải ở thuộc tính ng-options hơi khác 1 chút với các đối tượng. Ví dụ dùng 1 đối tượng là nguồn dữ liệu, x là key, y là value:

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>Chọn 1 chiếc xe:</p>

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

<h1>Bạn chọn: {{selectedCar}}</h1>

</div>

<p>Ví dụ này mô tả cách dùng 1 đối tượng là nguồn dữ liệu khi tạo 1 danh sách dropdown.</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : "Toyota",
        car02 : "BWM",
        car03 : "Dammio"
    }
});
</script>

</body>
</html>

Giá trị được chọn luôn luôn là giá trị trong cặp key-value. Giá trị trong 1 cặp key-value cũng có thể là 1 đối tượng. Ví dụ giá trị được chọn sẽ là giá trị trong 1 cặp key-value, tuy nhiên lần này nó là 1 đối tượng.

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>Chọn 1 chiếc xe:</p>

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

<h1>Bạn chọn: {{selectedCar.brand}}</h1>
<h2>Dòng xe: {{selectedCar.model}}</h2>
<h3>Màu sắc: {{selectedCar.color}}</h3>

<p>Chú ý giá trị được chọn thể hiện 1 đối tượng.</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Toyota", model : "ACC", color : "red"},
        car02 : {brand : "Mazda", model : "800", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>

</body>
</html>

Các tùy chọn ở danh sách dropdown không cần phải là key trong cặp key-value, nó cũng có thể là giá trị, hoặc 1 thuộc tính của đối tượng giá trị.


<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>Chọn 1 chiếc xe --- dammio.com:</p>

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

<h1>Bạn chọn: {{selectedCar.brand}}</h1>
<h2>Dòng xe: {{selectedCar.model}}</h2>
<h3>Màu sắc: {{selectedCar.color}}</h3>

<p>Đoạn văn bản trong danh sách dropdown cũng có thể là 1 thuộc tính của đối tượng giá trị.</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>

</body>
</html>

Kết luận: như vậy bài viết đã trình bày cho bạn về cách sử dụng Select/Dropdown trong AngularJS.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [AngularJS] Phần 13: Select/Dropdown trong AngularJS. https://www.dammio.com/2017/04/18/angularjs-phan-13-selectdropdown-trong-angularjs.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[AngularJS] Phần 13: Select/Dropdown trong AngularJS}, year = {2017}, url = {https://www.dammio.com/2017/04/18/angularjs-phan-13-selectdropdown-trong-angularjs}, urldate = {2024-12-05} }

Kết nối