7

Tôi có trường văn bản sử dụng AngularUI's typeahead feature. Có vẻ như sau:Góc-Giao diện người dùng: Lực lượng Các kết quả Typeahead

<input typeahead="eye for eye in autocomplete[column] | filter:$viewValue"> 

Tôi muốn buộc người dùng chọn tùy chọn từ danh sách được tạo. Nếu họ gõ một cái gì đó mà không có trong danh sách chính xác như nó xuất hiện, trên blur (nhấp vào bên ngoài của lĩnh vực văn bản), tôi muốn giá trị của trường văn bản để thiết lập lại giá trị ban đầu của nó.

Đây có phải là phần chức năng của chỉ thị typeahead hay tôi sẽ cần mở rộng nó? Tôi đã tìm kiếm khoảng 10 phút trên google và stackoverflow, nhưng không thể tìm thấy bất kỳ tài liệu liên quan nào.

Có ai vui lòng chỉ cho tôi đúng hướng để thực hiện việc này không?

+0

Có một đối số thứ hai để lọc cho phép đối sánh chính xác, có thể nó có thể làm cho nó hoạt động không? 'filter: $ viewValue: true' – jpmorin

+0

Hmm, đã phá vỡ typeahead trên trang của tôi. Có một phiên bản nào đó của Angular được yêu cầu không? –

+0

Cũng có một thuộc tính trong Ui-Boostrap để ép buộc kết quả hiện tại: 'typeahead-editable =" false "' (typeahead-editable (Mặc định: true): Nó có hạn chế các giá trị mô hình cho các giá trị được chọn từ cửa sổ bật lên không?) – jpmorin

Trả lời

12

Có thuộc tính trong plugin để chỉ ép buộc các giá trị hiện tại: typeahead-editable="false". Giá trị mặc định là true.

Chỉ $modelValue đang được đặt thành trống khi có giá trị sai được chọn và điều này thực sự cần thiết nếu không chúng tôi sẽ không thể viết bất cứ điều gì. Các $viewValue vẫn với văn bản cuối cùng được nhập. Bạn có thể liên kết sự kiện mờ của riêng bạn với trường để đặt lại $viewValue?

Đây là JsFiddle của bạn với giá trị được lựa chọn hiển thị: http://jsfiddle.net/ZjPWe/61/

Bạn cũng có thể sử dụng thuộc tính typeahead-on-select mà đòi hỏi một callback khi một giá trị được chọn, nhưng tôi không chắc chắn nó sẽ làm việc với typeahead-editable="false" vì không có giá trị là đang được chọn.

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