角度 UI 网格外部过滤

Angular UI-Grid External Filtering

本文关键字：过滤 外部 网格 UI 角度      更新时间：2023-09-26

这是工作 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;

网格 API 在外部触发时不会筛选网格。

错误扑通

我错过了什么？

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

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

无论如何，这是工作 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;
    };
相关文章：