Angularjs UI选择StartsWith搜索

时间:2016-05-01 19:26:40

标签: javascript angularjs

在我的angularjs应用程序中,我正在使用UI select.This是我的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>

选择过滤器提供包含搜索,但我想在StartsWith的基础上过滤元素。我已经看过几个带过滤器的启动示例,但我无法将它们合并到UI Select中。

1 个答案:

答案 0 :(得分:2)

单项: Plunker

<强> 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>

多件商品 Plunker

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>