CODEWITHSUNDEEP
angularjsui-select
michal.jakubeczy
michal.jakubeczy

Reputation: 9459

ui-select does not display selected item

I have a following plunker where I am binding ui-select to list of items defined in controller like this:

app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
  var vm = this;   
  vm.tester = 1;
  vm.listItems = [
    { label: "aaa", value: 0, },
    { label: "bbb", value: 1, },
  ];    
});

And this is ui-select:

  <ui-select reset-search-input="true"
             ng-model="ctrl.tester">
      <ui-select-match placeholder="">
          {{$select.selected.text}}
      </ui-select-match>

      <ui-select-choices repeat="item.value as item in ctrl.listItems | filter: { label: $select.search }">
          <span ng-bind-html="item.label" title="{{item.label}}"></span>
      </ui-select-choices>
  </ui-select>

The problem is that although ctrl.tester contains selected value, selected value is not displayed in ui-select.

I must be missing something very obvious but cannot find what.

Upvotes: 0

Views: 955

Answers (1)

RahulB
RahulB

Reputation: 2110

You need to update your html to use {{$select.selected.label}} instead of {{$select.selected.text}}

<ui-select reset-search-input="true"
             ng-model="ctrl.listItems.selected">
      <ui-select-match placeholder="">
          {{$select.selected.label}}
      </ui-select-match>

      <ui-select-choices repeat="item.value as item in ctrl.listItems | filter: { label: $select.search }">
          <span ng-bind-html="item.label" title="{{item.label}}"></span>
      </ui-select-choices>
  </ui-select>

Upvotes: 1

Related Questions