Фильтр не будет работать с AngularStrap bs-select и ng-options

Я пытаюсь отфильтровать список доступных параметров в раскрывающемся списке bs-select, используя директиву ng-options в соответствии со спецификациями AngularStrap. Я просто использую их пример вот так.

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 не меняется. Если я «жестко запрограммирую» фильтр в ng-options для чтения ... | filter: 'Gear', он будет отлично работать при загрузке страницы.

Если я добавлю следующий код в представление, я увижу, что массив значков отфильтрован правильно.

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

Вопрос

  1. Можно ли вообще динамически фильтровать массив параметров и соответствующим образом реагировать на bs-select?
  2. Если да, то как? Если нет, то как это можно изменить, чтобы оно работало?

javascript angularjs angular-filters ng-options angular-strap
person generalopinion    schedule 29.12.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Похоже, что фильтр не оценивается для создания списка параметров. Вместо этого вы можете выполнить фильтрацию в контроллере.

В вашем контроллере:

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

person PSL    schedule 29.12.2014
comment
@dfsq Да, я тоже был удивлен. Однако я никогда раньше не использовал фильтры в представлении с ng-option. Я считаю, что регулярное выражение для синтаксического анализатора выражений ng-option игнорирует фильтр - person PSL; 30.12.2014
comment
Ну фильтры нормально работают с ngOptions, похоже проблема с AngularStrap. В любом случае вы нашли обходной путь для использования контроллера. - person dfsq; 30.12.2014
comment
Да, вы правы, похоже, проблема связана с var watchedOptions = parsedOptions.$match[7].replace(/\|.+/, '').trim(); scope.$watch(watchedOptions, function(newValue, oldValue) { в коде bsSelect, он отслеживает только icons в области видимости и обновляет dom. Фильтры игнорируются. Так что либо установите scope.icons и значки обновления события keyup с фильтром, либо предоставьте метод получения, это все, что я вижу в качестве обходных путей. - person PSL; 30.12.2014