Angular Bootstrap Ui-select

I am trying to use the ui-select directive in my angularjs but it is not displaying, i tried following the documentation and this is what i did:

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

Then I have an array of genders:

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

I haven't really used this directive before so I'm a bit confused as to what i am doing wrong.

There are no errors being displayed in my browser console, i have included the module in my app as well.

I want to use it for more than a simple dropdown of genders but i figure this is a start if i can do this then i won't have any more problems. :)

Edit: So i cleared my browser cache and refreshed my page and this time i did notice an error:

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

Upvotes: 9

Answers (5)

Lucian Sturião

Reputation: 175

As @Caner Çakmak said, I added a class named as tag in both ui-select-choices and ui-select-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>

And it worked! Thanks

PS: I am using ui-select v0.19.X and Angular v1.5.X (that seems to be when this error occurs)

Upvotes: 0

SAHbKA

Reputation: 347

.ui-select-toggle > .caret { pointer-events: none } fixes the problem of error: [ui.select:transcluded] Expected 1 .ui-select-match but got '0'. for me

Upvotes: 0

Caner

Reputation: 1498

just add a class named as the tag.

 <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>

Upvotes: 6