动态更新两个 uiGrid 之间共享的对象 AngularJS

Question

我在一个页面上有两个 uiGrid，每个实际上都依赖于相同的数据源，并且在每个网格的其中一列上使用过滤器来决定哪些项目应该出现在哪个网格中，我的想法是如果我想让一个项目出现在另一个网格中，我只需要更新对象上的属性它就会跳过。

我遇到的问题是，当我更新数据中某个对象的属性时，我可以看到更改反映在网格中的数据中，但它不会跳转到另一个网格 - 但是，如果我提供一个新对象，它将跳过。

我已经在 Plunker (http://plnkr.co/edit/duMg0OZaZm7p8uSpTK0q?p=preview) 上设置了以下代码（基于 uiGrid 教程之一）来演示问题 - 如果对象具有性别 [=23=，顶部网格应该显示该对象] 为 'male'，如果性别为 'female'，它应该移动到底部网格，当使用更新按钮时，您可以看到性别变化但留在当前网格中。我也试过使用外部过滤器并手动更新它以查看它是否触发刷新但它没有用。

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants',
  function($scope, $http, uiGridConstants) {
    $scope.gridOptions = {
      enableFiltering: true,
      columnDefs: [
        // default
        {
          field: 'name'
        },
        // pre-populated search field
        {
          field: 'gender',
          filter: {
            term: 'male'
          }
        },
        // no filter input
        {
          field: 'company',
          enableFiltering: false,
          filter: {
            noTerm: true,
            condition: function(searchTerm, cellValue) {
              return cellValue.match(/a/);
            }
          }
        },
        // specifies one of the built-in conditions
        // and a placeholder for the input
        {
          field: 'email',
          filter: {
            condition: uiGridConstants.filter.ENDS_WITH,
            placeholder: 'ends with'
          }
        },
        // custom condition function
        {
          field: 'phone',
          filter: {
            condition: function(searchTerm, cellValue) {
              var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
              return strippedValue.indexOf(searchTerm) >= 0;
            }
          }
        },
        // multiple filters
        {
          field: 'age',
          filters: [{
            condition: uiGridConstants.filter.GREATER_THAN,
            placeholder: 'greater than'
          }, {
            condition: uiGridConstants.filter.LESS_THAN,
            placeholder: 'less than'
          }]
        }
      ]
    };

    $scope.gridOptions2 = {
      enableFiltering: true,
      columnDefs: [
        // default
        {
          field: 'name'
        },
        // pre-populated search field
        {
          field: 'gender',
          filter: {
            term: 'female'
          }
        },
        // no filter input
        {
          field: 'company',
          enableFiltering: false,
          filter: {
            noTerm: true,
            condition: function(searchTerm, cellValue) {
              return cellValue.match(/a/);
            }
          }
        },
        // specifies one of the built-in conditions
        // and a placeholder for the input
        {
          field: 'email',
          filter: {
            condition: uiGridConstants.filter.ENDS_WITH,
            placeholder: 'ends with'
          }
        },
        // custom condition function
        {
          field: 'phone',
          filter: {
            condition: function(searchTerm, cellValue) {
              var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
              return strippedValue.indexOf(searchTerm) >= 0;
            }
          }
        },
        // multiple filters
        {
          field: 'age',
          filters: [{
            condition: uiGridConstants.filter.GREATER_THAN,
            placeholder: 'greater than'
          }, {
            condition: uiGridConstants.filter.LESS_THAN,
            placeholder: 'less than'
          }]
        }
      ]
    };

    $scope.updateData = function() {
      if ($scope.myData.stuff[0].gender === 'male') {
        $scope.myData.stuff[0].gender = 'female';
      } else {
        $scope.myData.stuff[0].gender = 'male';
      }
    };



    $scope.replaceData = function() {
      if ($scope.myData.stuff[0].gender === 'male') {
        $scope.myData = {
          stuff: [{
            "id": 0,
            "guid": "de3db502-0a33-4e47-a0bb-35b6235503ca",
            "isActive": false,
            "balance": ",489.00",
            "picture": "http://placehold.it/32x32",
            "age": 30,
            "name": "Sandoval Mclean",
            "gender": "female",
            "company": "Zolavo",
            "email": "sandovalmclean@zolavo.com",
            "phone": "+1 (902) 569-2412",
            "address": {
              "street": 317,
              "city": "Blairstown",
              "state": "Maine",
              "zip": 390
            },
            "about": "Fugiat velit laboris sit est. Amet eu consectetur reprehenderit proident irure non. Adipisicing mollit veniam enim veniam officia anim proident excepteur deserunt consectetur aliquip et irure. Elit aliquip laborum qui elit consectetur sit proident adipisicing.\r\n",
            "registered": "1991-02-21T23:02:31+06:00",
            "friends": [{
              "id": 0,
              "name": "Rosanne Barrett"
            }, {
              "id": 1,
              "name": "Nita Chase"
            }, {
              "id": 2,
              "name": "Briggs Stark"
            }]
          }]
        };
      } else {
        $scope.myData = {
          stuff: [{
            "id": 0,
            "guid": "de3db502-0a33-4e47-a0bb-35b6235503ca",
            "isActive": false,
            "balance": ",489.00",
            "picture": "http://placehold.it/32x32",
            "age": 30,
            "name": "Sandoval Mclean",
            "gender": "male",
            "company": "Zolavo",
            "email": "sandovalmclean@zolavo.com",
            "phone": "+1 (902) 569-2412",
            "address": {
              "street": 317,
              "city": "Blairstown",
              "state": "Maine",
              "zip": 390
            },
            "about": "Fugiat velit laboris sit est. Amet eu consectetur reprehenderit proident irure non. Adipisicing mollit veniam enim veniam officia anim proident excepteur deserunt consectetur aliquip et irure. Elit aliquip laborum qui elit consectetur sit proident adipisicing.\r\n",
            "registered": "1991-02-21T23:02:31+06:00",
            "friends": [{
              "id": 0,
              "name": "Rosanne Barrett"
            }, {
              "id": 1,
              "name": "Nita Chase"
            }, {
              "id": 2,
              "name": "Briggs Stark"
            }]
          }]
        };
      }
      $scope.gridOptions.data = $scope.myData.stuff;
      $scope.gridOptions2.data = $scope.myData.stuff;
    };

    $scope.myData = {
      stuff: [{
        "id": 0,
        "guid": "de3db502-0a33-4e47-a0bb-35b6235503ca",
        "isActive": false,
        "balance": ",489.00",
        "picture": "http://placehold.it/32x32",
        "age": 30,
        "name": "Sandoval Mclean",
        "gender": "male",
        "company": "Zolavo",
        "email": "sandovalmclean@zolavo.com",
        "phone": "+1 (902) 569-2412",
        "address": {
          "street": 317,
          "city": "Blairstown",
          "state": "Maine",
          "zip": 390
        },
        "about": "Fugiat velit laboris sit est. Amet eu consectetur reprehenderit proident irure non. Adipisicing mollit veniam enim veniam officia anim proident excepteur deserunt consectetur aliquip et irure. Elit aliquip laborum qui elit consectetur sit proident adipisicing.\r\n",
        "registered": "1991-02-21T23:02:31+06:00",
        "friends": [{
          "id": 0,
          "name": "Rosanne Barrett"
        }, {
          "id": 1,
          "name": "Nita Chase"
        }, {
          "id": 2,
          "name": "Briggs Stark"
        }]
      }]
    };

    $scope.gridOptions.data = $scope.myData.stuff;
    $scope.gridOptions2.data = $scope.myData.stuff;

  }
]);

有人有简单的解决方法吗？当它被使用时，它将包含从服务器和数百（可能数千）个对象检索的数据，所以我真的不想每次都创建新数据来使事情正常进行。

Answer 1

使用 notifyDataChange

uiGrid docs

动态更新两个 uiGrid 之间共享的对象 AngularJS

Dynamically update an object shared between two uiGrids AngularJS

angularjs

angular-ui-grid