góc Bootstrap Ui-chọn

Question

Tôi đang cố gắng sử dụng các chỉ thị ui-chọn trong angularjs của tôi, nhưng nó không hiển thị, tôi thử làm theo các tài liệu hướng dẫn và đây là những gì tôi đã làm:

<ui-select ng-model="form.gender" theme="bootstrap"> 
    <ui-select-choices repeat="gender in genders"> 
     {{ gender.name }} 
    </ui-select-choices> 
</ui-select> 

Sau đó, tôi có một mảng giới tính:

$scope.genders = [ 
    { 
     name: 'Male' 
    }, 
    { 
     name: 'Female' 
    } 
]; 

Tôi chưa thực sự sử dụng chỉ thị này trước đây nên tôi hơi bối rối về những gì tôi đang làm sai.

Không có lỗi nào được hiển thị trong bảng điều khiển trình duyệt của tôi, tôi cũng đã bao gồm mô-đun trong ứng dụng của mình.

Tôi muốn sử dụng nó nhiều hơn một trình đơn thả xuống giới tính đơn giản nhưng tôi cho rằng đây là sự khởi đầu nếu tôi có thể thực hiện việc này sau đó tôi sẽ không gặp thêm bất kỳ sự cố nào. :)

Edit: Vì vậy, tôi xóa bộ nhớ cache của trình duyệt của tôi và làm mới trang của tôi và lần này tôi đã nhận thấy một lỗi:

Error: [ui.select:transcluded] Expected 1 .ui-select-match but got '0'. 

Answer 1

Bạn phải truy cập liên kết này và làm theo tấm gương của mình.

You can follow its examples

Cá nhân tôi thích sử dụng uiselect2, mạnh mẽ hơn và đơn giản của nó hơn uiselect

link of uiselect2

Answer 2

Error: [ui.select:transcluded] Expected 1 .ui-select-match but got '0'.

Lỗi này đã được cố định thời gian gần đây tại trang Github. Chỉ cần cập nhật ui-chọn thành v0.14.3.

Tham chiếu: https://github.com/angular-ui/ui-select/issues/224

Answer 3

chỉ thêm một lớp có tên là thẻ.

<ui-select ng-model="form.gender" theme="bootstrap"> 
    <ui-select-choices class="ui-select-choices" repeat="gender in genders"> 
     {{ gender.name }} 
    </ui-select-choices> 
</ui-select> 

Answer 4

.ui-select-Toggle> .caret {con trỏ-sự kiện: none} sửa chữa các vấn đề của lỗi: [ui.select:transcluded] Dự kiến ​​1 .ui-chọn-match nhưng có '0 '. cho tôi

Answer 5

Như @Caner Cakmak nói, tôi đã thêm một lớp có tên là thẻ trong cả ui-chọn-lựa chọn và ui-chọn-match

Ex:

<ui-select ng-model="form.gender" theme="bootstrap"> 
    <ui-select-match class="ui-select-match" [etc...etc....etc]> 
    <ui-select-choices class="ui-select-choices" repeat="gender in genders"> 
    {{ gender.name }} 
    </ui-select-choices> 
</ui-select> 

Và nó làm việc! Cảm ơn

PS: Tôi đang sử dụng ui-chọn v0.19.X và góc v1.5.X (mà có vẻ là khi lỗi này xảy ra)