Angularjs UI选择从搜索开始

Question

在我的angularjs应用中，我正在使用UI选择。这是我的HTML

<ui-select name="service" multiple ng-model="service.ServiceName" close-on-select="false" >
                <ui-select-match placeholder="Select Services...">{{$item.ServiceName}}</ui-select-match>
                <ui-select-choices repeat="service in Services | filter: {ServiceName: $select.search} | filter:myFilter track by service.ServiceId">
                      {{service.ServiceName}}
                </ui-select-choices>

Select过滤器提供了包含搜索的内容，但我想基于StartsWith过滤元素。我已经看到了几个startswith过滤器的示例，但是无法将它们合并到UI Select中。

Answer 1

单件： 柱塞 。

JS

vm.startsWith = function (actual, expected) {
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
  }

HTML

<ui-select-choices repeat="country in ctrl.countries|filter:$select.search:ctrl.startsWith">
      <span ng-bind-html="country.name | highlight: $select.search"></span>
      <small ng-bind-html="country.code | highlight: $select.search"></small>
    </ui-select-choices>

多个项目： 柱塞

JS与上述相同。

HTML

<ui-select multiple ng-model="ctrl.multipleDemo.colors" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 300px;" title="Choose a color">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in ctrl.availableColors | filter:$select.search : ctrl.startsWith">
      {{color}}
    </ui-select-choices>
  </ui-select>