Question

我有一个场景，因为我必须根据文本框中给出的输入过滤下拉列表中的元素。有可能吗，那该怎么做？我试过ng-change但是没有得到。

Html代码：

<input type="text" ng-model="somvar" ng-change="someFunc(somvar)" />

<div id="dropdown" class="dropdownClass">
    <ul class="predtsct">
        <li class="prfdwn" ng-repeat="list in countries| filter: somevar" ng-click="countryIdFunc(countriesLst.countryId)">{{list.countryName}}</li>
    </ul>
</div>

Answer 1

我在评论中发布的小提琴：下拉列表与普通列表没有什么不同，除了样式不同。此示例使用Bootstrap执行下拉列表，但如果您使用它们，则可以找到许多其他示例。

工作版本：https://jsfiddle.net/jorgthuijls/6gvp2z9h/

这是整个观点：

<div ng-controller="MyCtrl">
  city: <input type="text" ng-model="search.city">

  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <!-- the 'search' bit in the filter maps to the 'search' variable on $scope -->
      <li ng-repeat="user in users | filter:search:strict">{{user.name}}, {{user.city}}</li>
    </ul>
  </div>
</div>

控制器也很小：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.search = {};
  $scope.search.city = 'new york';
  $scope.users = [{
    name: 'bob',
    city: 'hong kong'
  }, {
    name: 'jack',
    city: 'new york'
  }, {
    name: 'john',
    city: 'new hampshire'
  }]
}

Answer 2

您可以使用Typeahead.js，它可以非常灵活地控制下拉列表并对其进行过滤。

如何过滤下拉列表中的元素？

2 个答案: