Angular UI-网格外部过滤

Question

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

直接绑定网格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;

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

错误Plunk

我错过了什么？

Answer 1

嗯，在我意识到你已经把 ng-controller 属性放在 <select>/<option> 组上方的 <div> 上之前，我进去玩了你的 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;
    };

Angular UI-网格外部过滤

Angular UI-Grid External Filtering

javascript

angularjs

angular-ui-grid