UI 更改网格选项后网格不会立即更新

Question

我正在使用 UI Grid 模块开发一个 AngularJS 项目。我希望将行过滤作为一个选项提供，但并不是很多用户需要它并且过滤框占用了很多 space 所以我想从禁用过滤选项开始并有一个按钮来启用它根据需要。所以我设置 enableFiltering: false 并添加了一个运行 $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering; 的按钮，但点击它似乎没有做任何事情。经过更多测试后，我发现如果我从 enableFiltering: true 开始，点击该按钮仍然不会立即执行任何操作，但如果我点击它然后尝试输入其中一个筛选框，它们就会消失，因为当我开始输入时（但即使我再次点击按钮仍然不会重新出现）。

知道如何让它正常工作吗？我已经尝试过 $scope.$apply()，但这只给了我 "Error: [$rootScope:inprog] $apply already in progress." Plunker here: http://plnkr.co/edit/L5bgA4XukmYJaVQHVkgR

Answer 1

我猜这是你想要的：http://plnkr.co/edit/Qyts0zQrltx4QxlOWgob?p=preview

灵感来自 ui-grip 网站的这个例子：http://ui-grid.info/docs/#/tutorial/103_filtering

angular.module('app',['ui.grid']).controller('Ctrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants){
  $scope.toggle = function(){
    $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
    $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
  }
  $scope.gridOptions = {
    data: [{name:'Bob',age:20},{name:'Joe',age:21}],
    enableFiltering: true,
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    },
  }
}]);

已注入 uiGridConstant
已将用于通知数据更改的 gridApi 添加到 ui-grid
点击数据切换时使用 gridApi

UI 更改网格选项后网格不会立即更新

UI Grid doesn't immediately update after changing grid options

javascript

angularjs

ui-grid