当过滤器未更改时，在NG-Grid上更新过滤器

Question

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

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

现在，如果过滤器文本在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