Hộp chọn AngularJS

AngularJS cho phép bạn tạo danh sách rút gọn dựa trên các mục trong mảng hoặc đối tượng.

Tạo hộp chọn bằng ng-options

Nếu bạn muốn tạo danh sách rút gọn dựa trên đối tượng hoặc mảng trong AngularJS, bạn nên sử dụng ng-options Hướng dẫn:

Mô hình

<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>

Thử ngay

ng-options với ng-repeat

Bạn cũng có thể sử dụng ng-repeat Hướng dẫn để tạo danh sách rút gọn tương tự:

Mô hình

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

Thử ngay

Do đó ng-repeat Hướng dẫn lặp lại một đoạn mã HTML cho mỗi mục trong mảng, vì vậy nó có thể được sử dụng để tạo lựa chọn trong danh sách rút gọn, nhưng ng-options Hướng dẫn được thiết kế đặc biệt để điền lựa chọn vào danh sách rút gọn.

Nên sử dụng哪一个?

Bạn có thể sử dụng ng-repeat Hướng dẫn và ng-options Hướng dẫn:

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

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

Mô hình

Sử dụng ng-repeat：

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>Bạn đã chọn: {{selectedCar}}</h1>

Thử ngay

Khi sử dụng giá trị làm đối tượng, sử dụng ng-value bằng value：

Mô hình

Thay thế ng-repeat Sử dụng làm đối tượng:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>Bạn đã chọn một {{selectedCar.color}} {{selectedCar.model}}</h1>

Thử ngay

Mô hình

Sử dụng ng-options：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Bạn đã chọn: {{selectedCar.model}}</h1>
<p>Màu sắc của nó là: {{selectedCar.color}}</p>

Thử ngay

Khi giá trị được chọn là đố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 ta sẽ sử dụng ng-options Câu lệnh.

Là nguồn dữ liệu đối tượng

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

Giả sử bạn có một đối tượng với cặp khóa giá trị:

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

ng-options Công thức trong thuộc tính đối tượng có sự khác biệt một chút:

Mô hình

Sử dụng đối tượng làm nguồn dữ liệux Đại diện cho khóa:y Đại diện cho giá trị:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Bạn đã chọn: {{selectedCar}}</h1>

Thử ngay

Giá trị được chọn sẽ luôn là trong cặp khóa giá trịGiá trị.

trong cặp khóa giá trịGiá trịhoặc có thể là đối tượng:

Mô hình

Giá trị được chọn vẫn sẽ là trong cặp khóa giá trịGiá trịĐiều này chỉ 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"}
};

Thử ngay

Các tùy chọn trong danh sách thả xuống không nhất thiết phải là cặp giá trị chìa khóaChìa khóaNó cũng có thể là giá trị, hoặc thuộc tính của đối tượng giá trị:

Mô hình

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

Thử ngay