2

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

我有一个 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下拉列表的输出推送到幕后的过滤器中。不过，这感觉很hacky。

是否有一种 angularjs 方法可以将 ui-select 的输出绑定到过滤器？或者也许用 ui-select 行为替换过滤器？

4

2 回答 2

1

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

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

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

于 2015-10-14T15:42:16.613 回答
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);
};

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

于 2015-02-13T23:41:24.163 回答