如果文本长度为零，则显示 ui-select-no-choice 消息

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-no-choice正在显示不正确的消息。如果用户输入超过 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 希望对您有所帮助。

update:: 不输入任何内容时隐藏以前的结果

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