Angular UI-Grid 外部过滤答案

【问题标题】：Angular UI-Grid External FilteringAngular UI-Grid 外部过滤
【发布时间】：2016-02-03 11:09:41
【问题描述】：

这是工作的plunk，它处理直接将gridAPi 绑定到html。但是，我正在尝试使用选择框来做同样的事情，但这不起作用。

直接绑定Grid Api查看作品

<div ng-controller="MainCtrl">This Filter works
    <input type="text" ng-model="gridApi.grid.columns[2].filters[0].term" />
     <div ui-grid="gridOptions" class="my-grid"></div>
</div>

但是，如果我触发，则在控制器中

 $scope.gridApi.grid.columns[0].filters[0].term=30;

Grid Api 在外部触发时不会过滤网格。

错误Plunk

我错过了什么？

【问题讨论】：

标签： javascript angularjs angular-ui-grid

【解决方案1】：

好吧，在我意识到您已将 <div> 上的 ng-controller 属性放在您的 <select>/<option> 组上方之前，我进入并在您的 plunker 中玩了一些东西，因此您选择的值不在控制器的范围。

当我将ng-controller 属性移回<body> 标记时，filterGrid() 函数起作用了。我还冒昧地在所选值上添加了$watcher，如果您希望动态过滤而不是单击按钮，它会在更改时更新$scope.gridApi.grid.columns[0].filters[0].term 值。什么。

无论如何，here's the working plunker，以及下面转载的精选位：

<body ng-controller="MainCtrl">

    <div>This Filter works <!-- took the ng-controller attr out of this div tag -->
        <input type="text" ng-model="gridApi.grid.columns[0].filters[0].term" />
        <div ui-grid="gridOptions" class="my-grid"></div>
    </div>

    <p>Now this does, too!</p>
    <select ng-model="filterTerm">
        <option value="30">30</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="20">20</option>
    </select>

    <input type="button" value="Filter Grid Content" ng-click="filterGrid(filterTerm)">
    ...
</body>

和控制器脚本：

    $scope.filterTerm;

    // Watching the value of $scope.filterTerm also works, 
    // as you can uncomment and see below, but I left the 
    // ng-click functionality from your original plunker

    // $scope.$watch(function() {return $scope.filterTerm; }, function(newVal) {
    //     if (newVal) {
    //         console.log('filter term updated to ' + JSON.stringify(newVal));
    //         $scope.gridApi.grid.columns[2].filters[0].term = newVal;
    //     }
    // });

    $scope.filterGrid = function(value) {
        console.log(value);
        $scope.gridApi.grid.columns[2].filters[0].term=value;
    };

【讨论】：