0

I try use ui-select instead select in Angular app. My problem is that ui-select is not visible.

This is working code with select:

    <select class = "form-control"
            ng-model = "vm.user">
        <option ng:repeat = "u in vm.users"
                value = "{{u.id}}">
            {{u.login}}
        </option>
    </select>

not working code with ui-select

   <ui-select  ng-model = "vm.user"
               style = "width: 300px; height: 50px">
        <ui-select-choices repeat = "u in vm.users">
            <div ng-bind-html = "u.login"></div>
        </ui-select-choices>
    </ui-select>

index.html

    <!-- UI-Select -->
    <link href = "content/select.min.css"
          rel = "stylesheet" />
    <!-- Angular -->
    <script src = "scripts/angular.min.js"></script>
    <!-- UI-Select -->
    <script src="scripts/select.min.js"></script>

Any idea what can be wrong?

Ninja.Turtle
  • 127
  • 1
  • 6

2 Answers2

1

you have to use the ui-select-match directive as well. otherwise it will not be displayed.

<ui-select-match placeholder="do select..">
  {{$select.selected.login}}
</ui-select-match>
oezkany
  • 201
  • 3
  • 10
0

Here is what you could do:

  • add dependency:
angular.module('something', ['ui.select'])
  • use code like this:
<ui-select ng-model="vm.user" style="width: 300px; height: 50px;">
    <ui-select-match placeholder="Select user...">
        {{$select.selected.name}}
    </ui-select-match>
    <ui-select-choices repeat="user in vm.users | filter: $select.search">
        <div ng-bind-html="user.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>
  • I assume that ui-select is not visible for you. If you don't see a dropdown then it could be caused by one of the following issue:

https://github.com/angular-ui/ui-select/issues/1731

https://github.com/angular-ui/ui-select/issues/1652

pdziewonski
  • 21
  • 3