AngularJS Select là một trong những directive trong AngularJS giúp tạo ra một danh sách các lựa chọn (option) và cho phép người dùng chọn một hoặc nhiều lựa chọn từ danh sách đó. Directive này rất hữu ích trong việc xây dựng các form và trang web có tính tương tác cao. Bài viết này sẽ giới thiệu về cách sử dụng AngularJS Select và các tính năng của nó. Hãy cùng tìm hiểu cùng W3seo.
Cách tạo và sử dụng AngularJS Select
Để tạo một AngularJS Select, ta cần sử dụng directive ng-options và ng-model.
Cú pháp tổng quát:
<select ng-model="selectedOption" ng-options="option for option in options"></select>
Trong đó:
selectedOption: biến trong scope sẽ lưu giá trị của option được chọn.options: mảng chứa các giá trị của các option.
Ví dụ:
<select ng-model="selectedFruit" ng-options="fruit for fruit in fruits"></select>
Khi sử dụng Select như trên, các options sẽ được hiển thị trong Select và khi người dùng chọn một option nào đó, giá trị của biến selectedFruit sẽ được cập nhật.
Để hiển thị một option mặc định được chọn khi load trang, ta có thể gán giá trị mặc định cho biến selectedOption trong scope trước đó:
$scope.selectedOption = "option2";
Để cho phép người dùng có thể chọn nhiều option, ta sử dụng thuộc tính multiple:
<select ng-model="selectedOptions" ng-options="option for option in options" multiple></select>
Ở đây, biến selectedOptions sẽ là một mảng chứa các option được chọn.
Ta cũng có thể sử dụng ng-repeat để tạo các option một cách tường minh hơn:
<select ng-model="selectedOption">
<option ng-repeat="option in options" value="{{option}}">{{option}}</option>
</select>Trong đó:
value="{{option}}": giá trị của option được gán bằng giá trị của biếnoption.{{option}}: hiển thị tên của option.
Để tạo một Select có thể tìm kiếm, ta có thể sử dụng thư viện ui-select. Thư viện này cung cấp các tính năng như tìm kiếm, lọc, phân trang, … cho Select. Ta có thể cài đặt thư viện này bằng cách sử dụng npm hoặc tải file từ trang chủ của thư viện. Sau đó, import file css và javascript vào trong trang:
<link rel="stylesheet" href="path/to/ui-select.css"> <script src="path/to/ui-select.js"></script>
Sau đó, ta có thể sử dụng directive ui-select để tạo một Select có tính năng tìm kiếm:
<ui-select ng-model="selectedCountry">
<ui-select-match placeholder="Select a country">{{$select.selected}}</ui-select-match>
<ui-select-choices repeat="country in countries | filter: $select.search">
{{country}}
</ui-select-choices>
</ui-select>Trong đó:
ng-model="selectedCountry": biến trong scope sẽ lưu giá trị của option được chọn.
Tiếp theo, chúng ta có thể sử dụng các thuộc tính như ng-model để liên kết giá trị được chọn với biến trong $scope. Ví dụ:
<select ng-model="selectedItem"> <option value="item1">Item 1</option> <option value="item2">Item 2</option> <option value="item3">Item 3</option> </select>
Trong ví dụ trên, giá trị được chọn sẽ được gán vào biến $scope.selectedItem. Nếu chúng ta muốn mặc định một giá trị ban đầu cho ng-model, chúng ta có thể sử dụng thuộc tính ng-init. Ví dụ:
<select ng-model="selectedItem" ng-init="selectedItem = 'item2'"> <option value="item1">Item 1</option> <option value="item2">Item 2</option> <option value="item3">Item 3</option> </select>
Trong ví dụ trên, giá trị ban đầu của selectedItem sẽ là 'item2'.
Ngoài ra, AngularJS cũng cung cấp các directive để thêm các tùy chọn động vào select. Ví dụ, chúng ta có thể sử dụng directive ng-repeat để lặp lại các tùy chọn từ một mảng trong $scope. Ví dụ:
<select ng-model="selectedItem">
<option ng-repeat="item in items" value="{{item.value}}">{{item.label}}</option>
</select>Trong đó, items là một mảng được định nghĩa trong $scope, bao gồm các đối tượng có thuộc tính value và label.
Ngoài ra, chúng ta cũng có thể sử dụng directive ng-options để tạo ra các tùy chọn động. Ví dụ:
<select ng-model="selectedItem" ng-options="item.value as item.label for item in items"></select>
Trong đó, ng-options sẽ tạo ra các tùy chọn dựa trên mảng items, với giá trị được chọn là thuộc tính value của mỗi đối tượng trong mảng và nhãn hiển thị là thuộc tính label.
Đó là một số cách tạo và sử dụng AngularJS Select. Các tính năng nâng cao của Select sẽ được trình bày trong các bài viết khác.
Trong AngularJS, bạn có thể tạo danh sách thả xuống (hộp chọn) dựa trên các mục trong một mảng hoặc một đối tượng.
Sử dụng ng-options
Bạn nên sử dụng chỉ thị ng-option để 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.
Xem ví dụ này:
<!DOCTYPE html>
<html>
<script src="http://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 = ["Java", "PHP", ".Net", "AngularJS", "C/C++"];
});
</script>
</body>
</html>
Kết quả
Ghi chú:
Bạn cũng có thể sử dụng lệnh ng-repeat để tạo danh sách thả xuống giống như ng-options.
Xem ví dụ này:
<!DOCTYPE html>
<html>
<script src="http://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 = ["Java", "PHP", ".Net", "AngularJS", "C/C++"];
});
</script>
<p>Ví dụ tương tự về danh sách thả xuống sử dụng lệnh ng-repeat.</p>
</body>
</html>
Kết quả
ng-options so với ng-repeat
Mặc dù, cả hai đều có thể được sử dụng cho danh sách thả xuống, nhưng lệnh ng-repeat lặ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, trong khi lệnh ng-options được tạo đặc biệt cho điền vào danh sách thả xuống với các tùy chọn và có ít nhất một lợi thế quan trọng:
Danh sách thả xuống được tạo bằng ng-options cho phép giá trị đã chọn là một đối tượng, trong khi danh sách thả xuống được tạo từ ng-repeat phải là một chuỗi.
Hãy xem xét rằng 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"}
];
Giới hạn của ng-repeat
Lệnh ng-repeat có một giới hạn là giá trị được chọn phải là một chuỗi:
Xem ví dụ này:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Chọn 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 : "Ford", color : "red"},
{model : "Honda", color : "white"},
{model : "Volvo", color : "black"},
{model : "Hundai", color : "gray"}
];
});
</script>
</body>
</html>
Kết quả
Trong khi sử dụng lệnh ng-options, bạn có thể chọn một giá trị đối tượng:
Xem ví dụ này:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Chọn 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 của nó là: {{selectedCar.color}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = [
{model : "Ford", color : "red"},
{model : "Honda", color : "white"},
{model : "Volvo", color : "black"},
{model : "Hundai", color : "gray"}
];
});
</script>
</body>
</html>
Kết quả
Sử dụng nguồn dữ liệu làm đối tượng
Chúng ta cũng có thể sử dụng nguồn dữ liệu như một đối tượng.
Hãy xem xét rằng bạn có một đối tượng với các cặp khóa-giá trị sau:
Biểu thức trong thuộc tính ng-options hơi khác đối với các đối tượng:
Xem ví dụ này:
$scope.cars = {
xe1 : "Ford",
xe2 : "Honda",
xe3 : "Volvo",
xe4 : "Hundai",
};
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Chọn xe:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Bạn đã chọn: {{selectedCar}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
xe1 : "Ford",
xe2 : "Honda",
xe3 : "Volvo",
xe4 : "Hundai",
}
});
</script>
</body>
</html>
Kết quả
Ví dụ 2:
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:
Xem ví dụ này:
$scope.cars = {
xe1: {brand: "Ford", model: "Mustang", color: "red"},
xe2: {brand: "Honda", model: "city", color: "white"},
xe3: {brand: "Volvo", model: "XC90", color: "black"},
xe4: {brand: "Hundai", model: "Creta", color: "gray"}
};
Xem ví dụ này:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a car:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Bạn đã chọn: {{selectedCar.brand}}</h1>
<h2>Mẫu: {{selectedCar.model}}</h2>
<h3>Màu: {{selectedCar.color}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
xe1: {brand: "Ford", model: "Mustang", color: "red"},
xe2: {brand: "Honda", model: "city", color: "white"},
xe3: {brand: "Volvo", model: "XC90", color: "black"},
xe4: {brand: "Hundai", model: "Creta", color: "gray"}
}
});
</script>
</body>
</html>
Kết quả
Các tính năng của AngularJS Select
AngularJS Select cung cấp nhiều tính năng để tùy chỉnh và kiểm soát việc lựa chọn, bao gồm:
- Two-way data binding: AngularJS Select hỗ trợ two-way data binding, cho phép các thay đổi được thực hiện trên mô hình dữ liệu được phản ánh ngay lập tức trên giao diện người dùng.
- Các thuộc tính của Select: AngularJS Select cho phép bạn tùy chỉnh thuộc tính của Select như multiple, disabled, ng-options và ng-model.
- Lọc dữ liệu: AngularJS Select có thể lọc dữ liệu theo yêu cầu của người dùng, giúp cho việc tìm kiếm và lựa chọn trở nên dễ dàng hơn.
- Validation: AngularJS Select hỗ trợ kiểm tra tính hợp lệ của dữ liệu được lựa chọn bằng cách sử dụng các thuộc tính như ng-required, ng-minlength và ng-maxlength.
- Custom Templates: AngularJS Select cho phép tùy chỉnh giao diện người dùng của Select bằng cách sử dụng các template được xác định trước.
- Sự kiện: AngularJS Select cung cấp các sự kiện để cho phép bạn kiểm soát việc lựa chọn và xử lý các thao tác của người dùng.
- Tích hợp với các thư viện khác: AngularJS Select có thể được tích hợp với các thư viện khác như Bootstrap, Foundation để tạo ra các giao diện người dùng đẹp và chuyên nghiệp hơn.
