angularjs ui-select禁用下拉列表并使其仅可搜索

时间:2017-02-19 23:42:47

标签: javascript html angularjs twitter-bootstrap ui-select

以下是我的问题的摘要:http://plnkr.co/edit/9DsLidTZR7RJDEq6PW0H?p=preview

我想只对下拉菜单进行搜索:仅当用户开始输入时,才会看到下拉列表的列表,并且只有包含键入的单词或字母的相应项应出现在列表中否则列表根本不显示。

<ui-select ng-model="person.selectedValue" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.value.name}}</ui-select-match>
    <ui-select-choices repeat="person.value as (key, person) in peopleObj | filter: {'value':$select.search}">
      <div ng-bind-html="person.value.name | highlight: $select.search"></div>
      <small>
        email: {{person.value.email}}
        age: <span ng-bind-html="''+person.value.age | highlight: $select.search"></span>
      </small>
    </ui-select-choices>
  </ui-select>

1 个答案:

答案 0 :(得分:1)

您可以使用ng-style并修改选项ul height属性。不要认为库中有任何OOB解决方案

<ui-select-choices ng-style="($select.search != '')? {'height' : 'auto'}: {'height' : '0px'}" repeat="person.value as (key, person) in peopleObj | filter: {'value':$select.search}">
        <div ng-bind-html="person.value.name | highlight: $select.search"></div>
        <small>
        email: {{person.value.email}}
        age: <span ng-bind-html="''+person.value.age | highlight: $select.search"></span>
      </small>
</ui-select-choices>

告诉我们。