Question

这是工作plunk，它处理将gridAPi直接绑定到html。但是，我正在尝试使用选择框执行相同操作，但这不起作用。

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

我错过了什么？

Answer 1

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

当我将ng-controller属性移回<body>标记时，filterGrid()功能正常工作。我还冒昧地在所选值上添加$watcher，如果您希望在运行时过滤而不是单击按钮，则会在更改时更新$scope.gridApi.grid.columns[0].filters[0].term值。 Whatevs。

无论如何，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-Grid外部过滤

1 个答案: