Angular Bootstrap Ui-select

Question

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

Caner · Accepted Answer · 2016-03-28 11:49:59Z

6

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>

answered Mar 28, 2016 at 11:49

Caner

1,49824 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dhyey Over a year ago

adding ui-select-match is also required in case you are using it

Vadim Over a year ago

Worked for me. Problem was with class, has to be the same as derective.

Diego Mello · Accepted Answer · 2016-03-02 16:15:58Z

3

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

This error was fixed recently at Github page. Just update ui-select to v0.14.3.

Reference: https://github.com/angular-ui/ui-select/issues/224

answered Mar 2, 2016 at 16:15

Diego Mello

5,4303 gold badges21 silver badges21 bronze badges

Comments

Kashif Mustafa · Accepted Answer · 2015-09-16 09:50:47Z

1

You must visit this link and follow its examples.

You can follow its examples

I personally prefer to use uiselect2, its more powerful and simple than uiselect

link of uiselect2

edited Sep 16, 2015 at 9:50

answered Sep 16, 2015 at 9:26

Kashif Mustafa

1,1826 silver badges20 bronze badges

4 Comments

user3718908x100 Over a year ago

I followed the link and saw what i did wrong however even after reading what they had there i am still clueless as to how the ui-select and ui-select-match and ui-select-choices work or what those directives even do.

user3718908x100 Over a year ago

Also when i try to use the 'selecticize' them i get errors: prntscr.com/8gx7ax

Kashif Mustafa Over a year ago

I personally prefer to use uiselect2, its so simple and powerfull than uiselect link, if you got your answer , please mark it as answer :)

ravishi Over a year ago

ui-select2 has been deprecated in favor of ui-select for quite some time. Not sure why you are recommending it.

SAHbKA · Accepted Answer · 2016-12-09 10:10:07Z

0

.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

answered Dec 9, 2016 at 10:10

SAHbKA

3471 gold badge2 silver badges15 bronze badges

Comments

Lucian Sturião · Accepted Answer · 2017-04-27 14:42:48Z

0

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)

answered Apr 27, 2017 at 14:42

Lucian Sturião

1751 silver badge4 bronze badges

Collectives™ on Stack Overflow

Angular Bootstrap Ui-select

5 Answers 5

2 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related