ui-select 不显示 selected 项

ui-select does not display selected item

我有一个关注 plunker 其中 我将 ui-select 绑定到控制器中定义的项目列表,如下所示:

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

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

问题是虽然ctrl.tester包含selected值,但是selected值在ui-select中没有显示。

我一定是遗漏了一些非常明显但找不到的东西。

您需要更新 html 才能使用 {{$select.selected.label}} 而不是 {{$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>