如何使用 ng-option 在 <select> 标签内添加搜索框

Question

我需要使用 ng-option 在 select 标签内添加搜索框。

    <select class="form-control" ng-model="modelname" ng-options="category.id as category.name for category in Categories ng-change="getSubCategory()">
<option><--search box should be here--></option>
</select>

Answer 1

您可以在用户点击按钮时设置您的 search 值。现场样本：http://plnkr.co/edit/jTRmBH.

模板：

 <label>
 Search Value: <input ng-model="filter">*emphasized text*
 </label><br>
 <label>
 Search Key:
 <select ng-model="key">
   <option value="$">Any</option>
   <option value="number">Student Number</option>
   <option value="region">Student Region</option>
 </select> 
 </label>
 <button ng-click="setfilter()">search</button>

javascript:

$scope.setfilter = function() {
  $scope.search = {};
  $scope.search[ $scope.key ] = $scope.filter;
  console.log( $scope.search );
};

Answer 2

你不能使用标准 html。您必须创建一些自定义的东西 - 沿着这些思路的东西。

<ul class="custom-select">
    <li class="custom-select__option" ng-repeat="o in $ctrl.options"><input type="search"/></li>
<ul>

创建起来并不困难，但这是您需要朝着的方向前进。

如何使用 ng-option 在 <select> 标签内添加搜索框

How to add search box inside <select> tag with ng-option

html

search-box

angularjs

ng-options