2013-07-22 14 views
11

Nói rằng tôi có điều này:Có thể <select> bị ràng buộc vào một mảng theo chỉ mục trong Angular.js không?

$scope.items = ["foo", "bar", "baz"]; 
$scope.index = 1; 

Làm thế nào để liên kết đến một <select>?

Tôi đã thử: <select ng-model="index" ng-options="i for i in items"> nhưng sau đó chọn tùy chọn trống tại thời điểm tải.

Điều này: <select ng-model="items[index]" ng-options="i for i in items"> dường như hoạt động ban đầu nhưng khi thay đổi lựa chọn, giá trị tại mục [index] được thay đổi, rõ ràng không phải là thứ chúng tôi muốn.

Giải pháp thay thế của tôi là ánh xạ mảng đó tới cặp {num, title} nhưng logic đó cắt lên bộ điều khiển.

Trả lời

25

Hãy thử như sau:

<select ng-model="index" ng-options="i as name for (i, name) in items"> 

Nếu bạn đánh dấu vào ng-options documentation, bạn sẽ thấy một trong các hình thức hỗ trợ là

chọn như nhãn cho giá trị trong mảng

  • chọn là những gì giá trị của mô hình nên khi mục được chọn
  • nhãn là nội dung để hiển thị

Chúng tôi đã kết hợp điều đó với các (key, value) nhóm, mà bạn có thể sử dụng để có được quyền truy cập vào khóa trong đối tượng (hoặc trong trường hợp này, chỉ mục trong mảng).

Chỉnh sửa: Tôi thấy cùng vấn đề bạn đang thấy. Nhận xét về tài liệu góc đề xuất phương pháp này thay thế:

<select ng-model="index" ng-options="items.indexOf(item) as item for item in items"> 

IMO nào không hoàn toàn sạch, nhưng có vẻ hoạt động.

+1

Tôi không có lựa chọn ban đầu nào với phương pháp này mặc dù 'index = 1'. Khi theo dõi giá trị tôi thấy rằng khi lựa chọn được thực hiện, 'index' trở thành chỉ mục như một chuỗi' index = "1" '. Có lẽ có một loại không phù hợp? –

+0

Cảm ơn bạn đã chỉnh sửa, đúng vậy! Không hoàn toàn tốt đẹp có lẽ nhưng nó đập lộn xộn bộ điều khiển bằng lề công bằng. –

+0

@sjmulder lưu ý rằng '[] .indexOf' không có trong IE8 trong trường hợp bạn phải hỗ trợ nó: ( –

Các vấn đề liên quan