Question

http://plnkr.co/edit/3zxmNK?p=preview

我有2张桌子。它们都绑定到相同的数据，但第二个表在designation: part-time上过滤。在第一个表中更改designation时，我希望第二个表重新运行过滤器并进行更新。例如，最初有2名兼职员工;如果我将另一个更改为兼职，则第二行应出现在第二个表中。现在，我已经能够使用可怕的黑客来实现这一目标（可以在Plunker中看到）。黑客是稍微更改过滤器文本以强制更新表第二表。

现在，如果过滤器文本在ng-grid上发生更改，则表将更新。然而，在我的情况下，它是实际内容，而不是我想要更改的过滤器（在这种情况下，designation）。

有没有人知道如何在没有这个黑客的情况下完成同样的行为？

Answer 1

您应该可以为第二个网格使用单独的集合。然后只需观察第一个集合进行更改，并对第二个集合进行更新，该更新应自动反映在网格中。

更新的JS

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.designations = ['full-time','part-time'];

  $scope.employeeData = [{name: "Moroni", age: 50, designation: 'full-time'},
                   {name: "Tiancum", age: 43, designation: 'full-time'},
                   {name: "Jacob", age: 27, designation: 'full-time'},
                   {name: "Nephi", age: 29, designation: 'part-time'},
                   {name: "Enos", age: 34, designation: 'part-time'}];

  $scope.partTimeData = [];

  $scope.employeeOptions = {
    data: 'employeeData',
    enableCellEdit: true,
    columnDefs: [{field: 'name', displayName: 'Name'},
                 {field: 'age', displayName: 'Age'},
                 {field:'designation', displayName:'Designation', 
                  cellTemplate: 'selectCellTemplate.html'}]

  };

  $scope.$watch("employeeData", function(){
    tempArray = [];
    for(var i=0;i<$scope.employeeData.length;i++){
      if($scope.employeeData[i].designation == "part-time")
        tempArray.push($scope.employeeData[i]);
    }
    angular.copy(tempArray, $scope.partTimeData);
  }, true);

  $scope.partTimeOptions = {
    data: 'partTimeData'
  };

  $scope.partTimeChangedIndicator = function(scope) {
    var watchStr = _.reduce($scope.employeeData, function (acc, emp) {
      return acc + emp.designation;
    }, '');
    return watchStr;
  };

  $scope.spaceAtEnd = true;
  $scope.$watch('partTimeChangedIndicator()',function() {
    var partTimeFilter = 'designation: part-time';
    if($scope.spaceAtEnd) {
      $scope.partTimeFilter.filterText = partTimeFilter + ' ';
      $scope.spaceAtEnd = false;
    }
    else {
      $scope.partTimeFilter.filterText = partTimeFilter;
      $scope.spaceAtEnd = true;
    }
  }, true);
});

http://plnkr.co/edit/Bml3S1?p=preview

Answer 2

我找到了另一种解决方案，但它对我来说仍然有些神秘，虽然比原来稍微好一点：

$scope.partTimeOptions.ngGrid.init();

这是一个更新的Plunker：http://plnkr.co/edit/BQRQZe?p=preview

过滤器未更改时，更新ng-grid上的过滤器

2 个答案: