Ng-options trong AngularJS

Bài đăng này đã không được cập nhật trong 8 năm

Nhu các bạn đã biết AngularJS bao gồm rất nhiều directives với nhưng chức năng nhiệm vụ khác nhau. Trong phần này chúng ta cùng nghiên cứu sâu về các cách thức sử dụng của một Directive quen thuộc, đó là ng-options.

ng-Options cung cấp một cơ sở iterator cho yếu tố 'tùy chọn' để có thể sử dụng thay vì dùng ng-Repeat khi mà chúng ta muốn cách thức chọn để bị ràng buộc vào một giá trị. Điều này là do các option trong select chỉ chấp nhận các giá trị là các chuỗi.

Chúng ta có một mảng các đối tượng sau:

$scope.items = [{name: 'one', age: 5 },{ name: 'two', age: 15 },{ name: 'three', age: 20 }];

và HTML

<html ng-app="app">
  <body>
    <div ng-controller="Test">
      <div>selected item is : {{selectedItem}}</div>
      <select ng-model="selectedItem">
        <option ng-repeat="item in items" value="{{item.age}}"{{item.name}}</option>
      </select>
    </div>
  </body>
</html>

Chúng ta có thể thấy model selectedItem sẽ hiển thị ra giá trị được chúng ta chọn trong danh sách các option. và ở đây chúng ta chỉ sử dụng các chuỗi bên trong các đối tượng mà không sử dụng một ng-model. Do vậy chúng ta phải sử dụng ng-option cho các loại tình huống như này.

Sử dụng ng-options file html sẽ được viết như sau

<html ng-app="app">
  <body>
    <div ng-controller="Test">
      <div>selected item is : {{selectedItem}}</div>
      <p> age of selected item: {{selectedItem.age}} </p>
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
    </div>
  </body>
</html>

Trong option mới chúng ta sẽ thấy element đầu tiên trong trong dropdown là một điểm option trống, điều này là do selectedItem không có giá trị khi khởi tạo nên AngularJS sẽ tạo ra một option trống và chọn nó làm giá trị mặc định. Để sửa chữa điều này, chúng ta sẽ gắn giá tri selectedItem là giá trị đầu tiên trong mảng chúng ta có

$scope.selectedItem = $scope.items[0];

Các cách sử dụng với ng-options

Với dữ liệu là mảng

Label cho giá trị trong mảng Đây là cách sử dụng cơ bản mà chúng ta hay dùng nhất với ng-options. Ng-options sẽ lặp từng phần từ trong mảng và tạo ra các element chứa giá trị hiện tại

<select ng-model="selectedItem" ng-options="item for item in items">
  <option value="0" selected="selected">one</option>
  <option value="1" selected="selected">Two</option>
  <option value="2" selected="selected">Three</option>
  <option value="3" selected="selected">Four</option>
</select>

giá trị cho các element sẽ tương ứng với các giá tri trong mảng dữ liệu của chúng ta.

Tính linh động của ng-option được biểu hiện là ở cách thức chứa các đối tượng chứ không phải là các chuỗi string cơ bản. Để hiểu hơn Chúng ta thay đổi mảng dữ liệu như sau:

scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];

và chúng ta thay đổi cách gọi trong ng-option

ng-options="item.name for item in items"

Đoạn mã trên rất đơn giản để hiểu. Chúng ta để cho AngularJS lặp các phần tử trong items với việc sử dụng item.name như là các chuỗi bên trong các element và sẽ là giá trị của selectedItem.

Sử dụng Select As để lấy giá trị trong màng

Theo mặc định khi chúng ta chọn 1 giá trị trong option, thì gia trị trong mảng được lấy có chỉ số tương ứng với giá trị value trong option, điều đó có nghĩa nếu chúng ta chọn giá trị two trong option thì giá selectedItem sẽ có giá trị tương ứng là { name: 'two', age: 27 }. Vơi AnguarJS chúng ta có thể lấy già trị age tương ứng với giá tri name má chúng ta đã chọn bằng cách sử dụng Select As trong biểu thức điều kiện của ng-options

ng-options="item.age as item.name for item in items"

html sẽ có dạng

<select ng-model="selectedItem" ng-options="select item.age as item.name for item in items">
  <option value="0" selected="selected">one</option>
  <option value="1">Two</option>
  <option value="2">Three</option>
</select>

ở đây giá trị text trong mỗi option item.name nhưng giá trị của chúng sẽ là item.age. Sử dụng Group by nhóm các giá trị thành label

Sử dụng Group là cách tạo ra nhãn nhóm một cách nhanh chóng trong option. giả sử chúng ta có dữ liệu như sau

scope.items = [
     {name: 'one', age: 5 },
     { name: 'two', age: 10 },
     { name: 'three', age: 15 },
     { name: 'four', age: 10 },
];

và ng-option trong Html

ng-options="item.name group by item.age for item in items"

biểu thức trên bảo AngularJS nhóm từng option trên giá tri item.age và chúng ta được option như sau demo https://jsfiddle.net/huannd/cptgh7h8/

Với dữ liệu là Object

ng-option không chỉ được sử dụng với dữ liệu mà nó cũng có thể được dùng cho các dữ liệu là các object.

Chúng ta có Items như sau:

$scope.items = {
    'one': 5,
    'two': 10,
    'three': 15,
    'four': 20,
  };

Nhãn trong option là (key, value) trong object

Biểu thức sử dụng cho các dữ liệu là object tương tự dữ liệu là mảng, chi khác là cách lặp theo (key, value) của object. ng-option cho phep chúng ta lặp theo từng căp (key, value).

ng-options="name for (name, value) in items"

chúng ta sẽ được html

<select ng-model="selectedItem" ng-options="name for (name, value) in items">
  <option value="four" selected="selected">...</option>
  <option value="one">...</option>
  <option value="three">...</option>
  <option value="two">...</option>
</select>

Với dữ liệu là object, model sẽ mặc định ràng buộc select box là giá trị, không phải key. Điều đó có nghĩa biểu thức trên, mặc dù các select box hiển thị name các key, nhưng các model vẫn liên kết với giá trị của nó và chùng ta có thẻ tùy biến giá trị được lấy ra bằn cách sử dụng Select as và group by. Chúng ta có thể làm giốn như ở trên khi dữ liệu là mảng, nhưng với object chúng ta đều có thể sử dụng (key, value) như nhau.

JavaScript jQuery

Mục lục