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" />

控制器（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下拉列表中的可用选项列表不会更改。如果我＆＃34;硬编码＆＃34;读取... | filter: 'Gear'的ng-options中的过滤器在页面加载时可以正常工作。

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

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

问题

是否可以动态过滤选项数组并相应地进行bs-select响应？
如果是这样，怎么样？如果没有，如何改变这种方式？

Answer 1

似乎未评估过滤器以生成选项列表。您可以改为在控制器中进行过滤。

在您的控制器中：

  $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>

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

1 个答案: