Một điều cần lưu ý là ngModel là bắt buộc để ngOptions hoạt động ... lưu ý ng-model="blah"câu nói "đặt $ scope.blah thành giá trị được chọn".
Thử cái này:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Đây là nhiều hơn từ tài liệu của AngularJS (nếu bạn chưa thấy nó):
cho các nguồn dữ liệu mảng:
- nhãn cho giá trị trong mảng
- chọn làm nhãn cho giá trị trong mảng
- nhóm nhãn theo nhóm cho giá trị trong mảng = chọn làm nhóm nhãn theo nhóm cho giá trị trong mảng
cho các nguồn dữ liệu đối tượng:
- nhãn cho (khóa, giá trị) trong đối tượng
- chọn làm nhãn cho (khóa, giá trị) trong đối tượng
- nhóm nhãn theo nhóm cho (khóa, giá trị) trong đối tượng
- chọn làm nhóm nhãn theo nhóm cho (khóa, giá trị) trong đối tượng
Đối với một số làm rõ về các giá trị thẻ tùy chọn trong AngularJS:
Khi bạn sử dụng ng-options, các giá trị của thẻ tùy chọn được viết bởi ng-tùy chọn sẽ luôn là chỉ mục của mục mảng mà thẻ tùy chọn liên quan đến . Điều này là do AngularJS thực sự cho phép bạn chọn toàn bộ các đối tượng với các điều khiển chọn và không chỉ các kiểu nguyên thủy. Ví dụ:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
Ở trên sẽ cho phép bạn chọn toàn bộ một đối tượng $scope.selectedItemtrực tiếp. Vấn đề là, với AngularJS, bạn không cần phải lo lắng về những gì trong thẻ tùy chọn của mình. Hãy để AngularJS xử lý việc đó; bạn chỉ nên quan tâm đến những gì trong mô hình của bạn trong phạm vi của bạn.
Dưới đây là một plunker thể hiện hành vi trên và hiển thị HTML được viết ra
Xử lý tùy chọn mặc định:
Có một vài điều tôi đã không đề cập ở trên liên quan đến tùy chọn mặc định.
Chọn tùy chọn đầu tiên và loại bỏ tùy chọn trống:
Bạn có thể làm điều này bằng cách thêm một đơn giản ng-initđặt mô hình (từ ng-model) thành phần tử đầu tiên trong các mục mà bạn lặp lại trong ng-options:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Lưu ý: Điều này có thể trở nên hơi điên rồ nếu footình cờ được khởi tạo đúng cách thành một cái gì đó "giả". Trong trường hợp đó, rất có thể bạn sẽ muốn xử lý việc khởi tạo footrong bộ điều khiển của mình.
Tùy chỉnh tùy chọn mặc định:
Đây là một chút khác nhau; ở đây tất cả những gì bạn cần làm là thêm một thẻ tùy chọn làm con bạn chọn, với thuộc tính giá trị trống, sau đó tùy chỉnh văn bản bên trong của nó:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Lưu ý: Trong trường hợp này, tùy chọn "trống" sẽ ở đó ngay cả sau khi bạn chọn một tùy chọn khác. Đây không phải là trường hợp cho hành vi mặc định của các lựa chọn trong AngularJS.
Tùy chọn mặc định tùy chỉnh ẩn sau khi lựa chọn được thực hiện:
Nếu bạn muốn tùy chọn mặc định tùy chỉnh của mình biến mất sau khi bạn chọn một giá trị, bạn có thể thêm thuộc tính ng-hide vào tùy chọn mặc định của mình:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>