ui-select-如果文本长度为零，则显示无选择消息

Question

我正在使用 ui-select 来实现自动完成功能，如果搜索条件没有结果，那么我正在使用 ui-select-no-choice向用户显示消息。

 <div class="form-group">
    <label class="Label">
      Select details
    </label>
    <ui-select ng-model="configItem.details" id="details" multiple class="form-control" theme="bootstrap" title="Choose details" reset-search-input="true" close-on-select="true" spinner-enabled="true" spinner-class="ui-select-spin">
      <ui-select-match placeholder="Search.." class="ui-select-match">{{$item.Name}}</ui-select-match>
      <ui-select-choices class="ui-select-choices" refresh="details($select.search)" refresh-delay="0" minimum-input-length="3" repeat="detail.ID as detail in details| filter: $select.search | limitTo: 100">
        <div ng-bind-html="detail.Name | highlight: $select.search"></div>
      </ui-select-choices>
      <ui-select-no-choice>
        No Information found
      </ui-select-no-choice>
    </ui-select>
  </div>

 $scope.details = function (search) {
        if (search.length >= 3) {
          AddUpdateService.getAllData(search)
        }
}

因为我的数据集很大，所以我使用了 minimum-input-length="4" 所以不会有很大的结果，但我面临的问题是如果用户不输入任何数据然后 ui -select-正在显示不正确的无选择消息。如果用户键入超过 4 个字符，我需要显示消息。

这是关于 x 图标对齐的屏幕截图

Answer 1

您可以根据需要使用 ng-class 隐藏它。

就像

<ui-select-no-choice ng-class="{ 'hide': $select.search.length < 5 }">
        No Information found
      </ui-select-no-choice>

这是演示 - https://next.plnkr.co/edit/PjuhUR?preview 希望对你有帮助。

更新::在未输入任何内容时隐藏以前的结果

    <ui-select-choices repeat="color in availableColors | filter: $select.search" 
ng-class="{ 'hide': $select.search.length < 1 }">

ui-select-如果文本长度为零，则显示无选择消息

ui-select-no-choice message is displayed if the text length is zero

autocomplete

angularjs

ui-select