2014-11-26 1 views
2

Я пытаюсь объединить ui-сетку и ui-select AngularUI, чтобы я мог выбирать поведение ui при фильтрации ui-сетки.Bind angulajs UI-Select to UI-Grid filter

У меня есть plunker, который является частью пути есть здесь: http://plnkr.co/edit/1rREdYPV4qz8slbwSLai?p=preview

<ui-select multiple ng-model="personName.selected" theme="bootstrap"> 
     <ui-select-match placeholder="Select or search a person in the list...">{{$item.name}}</ui-select-match> 
     <ui-select-choices repeat="person in people | filter: $select.search"> 
      <div ng-bind-html="person.name | highlight: $select.search"></div> 
     </ui-select-choices> 
     </ui-select> 

Но на данный момент, единственное, что я могу думать о том, чтобы скрыть собственные фильтры с JS и использовать JS, чтобы подтолкнуть вывод выпадающего списка ui-select в фильтр за кулисами. Тем не менее, это выглядит довольно взломанным.

Есть ли способ углового ввода BIND для вывода ui-select на фильтр? Или, возможно, замените фильтр с помощью ui-select behavoir?

ответ

0

У них пока нет глобального фильтра для UI-Grid, поэтому наилучшим вариантом является обходной путь, просто используя угловой фильтр для фильтрации самих данных и перезагрузки.

так в вашем HTML я добавил функцию обновления (RefreshData()) на изменениях:

<ui-select multiple ng-model="personName.selected" ng-change="refreshData()" theme="bootstrap"> 

тогда в вашем app.js, просто вызвать функцию для фильтрации данных:

$scope.refreshData = function() { 
    $scope.myGrid.data = $filter('filter')($scope.data, $scope.searchText, undefined); 
}; 

ваш был немного другим, потому что вы использовали multi-select, поэтому я сделал собственный угловой фильтр. Мой фильтр грубой и может быть оптимизирован точно, но вот оно, развилок вашего примера: http://plnkr.co/edit/Rk8y2N7p30VHNancDWnk?p=preview

1

Существует официальный пример, который демонстрирует, как сделать мульти-выбор фильтра:

http://ui-grid.info/docs/#/tutorial/306_custom_filters

Обратите внимание, что столбец «Возраст» в примере использует модальный вариант для выбора нескольких вариантов.