javascript - 过滤器不适用于 AngularStrap bs-select 和 ng-options

Question

我正在尝试根据 AngularStrap 的规范使用 ng-options 指令过滤 bs-select 下拉列表中的可用选项列表。我只是像这样使用他们的示例。

HTML:

<button type="button" class="btn btn-default btn-sm" ng-model="selectedIcon" 
    data-html="1"
    data-multiple="1" 
    ng-options="icon.value as icon.label for icon in icons | filter:iconSearch"
    bs-select>
    Action <span class="caret"></span>
</button>
<input type="text" class="form-control input-sm" ng-model="iconSearch" />

Controller (index.js):

$scope.selectedIcons = [];
$scope.icons = [
    {"value":"Gear","label":"<i class=\"fa fa-gear\"></i> Gear"},
    {"value":"Globe","label":"<i class=\"fa fa-globe\"></i> Globe"},
    {"value":"Heart","label":"<i class=\"fa fa-heart\"></i> Heart"},
    {"value":"Camera","label":"<i class=\"fa fa-camera\"></i> Camera"}
];

问题当我开始在输入框中键入内容时(即 iconSearch 开始更改)，AngularStrap 下拉列表中的可用选项列表不会更改。如果我在 ng-options 中“硬编码”过滤器以读取 ... | filter: 'Gear' 它会在页面加载时正常工作。

如果我将以下代码添加到 View 中，我可以看到图标数组正在被正确过滤。

<pre>{{icons | filter:iconSearch | json}}</pre>

问题

1. 甚至可以动态过滤选项数组并让 bs-select 做出相应响应吗？
2. 如果是，怎么做？如果不是，如何修改才能正常工作？

Answer 1

似乎没有评估过滤器以生成选项列表。您可以改为在 Controller 中进行过滤。

在你的 Controller 中:

  $scope.getIcons = function() {
     return filterFilter(icons, $scope.iconSearch);
  }

在你看来:

<button type="button" class="btn btn-default btn-sm" ng-model="selectedIcon" 
   data-html="1" data-multiple="1" 
   ng-options="icon.value as icon.label for icon in getIcons()" bs-select>
        Action <span class="caret"></span>
 </button>
 <input type="text" class="form-control input-sm" ng-model="iconSearch.value" />

angular.module('app', ['mgcrea.ngStrap', 'ngSanitize']).controller('ctrl', function($scope, filterFilter) {

  $scope.selectedIcons = [];
  
  var icons = [{
    "value": "Gear",
    "label": "<i class=\"fa fa-gear\"></i> Gear"
  }, {
    "value": "Globe",
    "label": "<i class=\"fa fa-globe\"></i> Globe"
  }, {
    "value": "Heart",
    "label": "<i class=\"fa fa-heart\"></i> Heart"
  }, {
    "value": "Camera",
    "label": "<i class=\"fa fa-camera\"></i> Camera"
  }];

  $scope.getIcons = function() {
     return filterFilter(icons, $scope.iconSearch);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.tpl.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div ng-app="app" ng-controller="ctrl">
  <button type="button" class="btn btn-default btn-sm" ng-model="selectedIcon" data-html="1" data-multiple="1" ng-options="icon.value as icon.label for icon in getIcons()" bs-select>
    Action <span class="caret"></span>
  </button>
  <input type="text" class="form-control input-sm" ng-model="iconSearch.value" />
 
</div>