Angularjs 动态更新两个UIJ之间共享的对象

Angularjs 动态更新两个UIJ之间共享的对象,angularjs,angular-ui-grid,Angularjs,Angular Ui Grid,我在一个页面上有两个UIGrid,每个UIGrid实际上依赖于相同的数据源,在每个网格中的一列上使用一个过滤器来决定哪些项应该出现在哪个网格中,其思想是,如果我希望一个项出现在另一个网格中,我只需要更新对象上的一个属性,它就会跳过 我遇到的问题是,当我更新数据中某个对象的属性时,我可以在网格中看到反映在数据中的更改,但它不会跳转到另一个网格-但是,如果我提供一个新对象,它将跳转到另一个网格 我在Plunker()上设置了以下代码(基于其中一个uiGrid教程)来演示问题-如果对象的性别属性为“男

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

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

我在Plunker()上设置了以下代码(基于其中一个uiGrid教程)来演示问题-如果对象的性别属性为“男性”,则顶部网格应显示对象,如果性别为“女性”,则应移动到底部网格,当使用“更新”按钮时,您可以看到性别变化,但仍保留在当前网格中。我还尝试使用一个外部过滤器并手动更新它,以查看它是否触发刷新,但它不起作用

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": "$3,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": "$3,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": "$3,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;

  }
]);
有人有简单的解决方法吗?当它被使用时,它将与从服务器和数百(可能数千)个对象中检索的数据一起使用,因此我不想每次都创建新数据以使事情正常进行。

使用notifyDataChange