Question

我尝试组合AngularUI的ui-grid和ui-select，以便在过滤ui-grid时可以有ui-select行为。

我有一个参与者的方式：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下拉列表的输出推送到幕后的过滤器中。但这感觉非常酷。

是否有一种angularjs方法将ui-select的输出绑定到过滤器？或者用ui-select behavoir？

替换过滤器

Answer 1

有一个官方示例演示了如何进行多选过滤：

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

请注意，示例中的“年龄”列使用模式来显示多选项。

Answer 2

他们还没有针对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);
};

你的有点不同，因为你使用多选，所以我做了一个自定义角度过滤器。我的过滤器很粗糙，可以肯定进行优化，但是这里是你的例子的分支： http://plnkr.co/edit/Rk8y2N7p30VHNancDWnk?p=preview

绑定angulajs UI-选择UI-Grid过滤器

2 个答案: