如何在ng-grid中保存数据?

时间:2014-05-26 07:37:24

标签: angularjs ng-grid

我看过帖子"如何使用ng-grid更改数据来更新我的服务器?"但我认为这对我的情况不可行。我在同一个控制器中有多个ng-grid(可能超过15个多手风琴内部)。跟踪单个ng-grid的所有单个单元似乎并不明智。有没有办法提取一个ng-grid的整个数据,而不是跟踪单个细胞?

1 个答案:

答案 0 :(得分:2)

您可以收听 ngGridEventData 事件,因此更改网格数据源时会触发此事件,让您知道数据已成功修改。

示例:

HTML:

   <div ng-controller="MyCtrl">
      <button ng-click="addPerson1()">Add PersonA</button>
        <div class="gridStyle" ng-grid="gridOptionsA"></div>
          <button ng-click="addPerson2()">Add PersonB</button>
        <div class="gridStyle" ng-grid="gridOptionsB"></div>     
    </div>

JS:

   app.controller('MyCtrl', function($scope) {
      $scope.gridOptionsList=[];
        $scope.myDataA = [
                 {name: "Moroni", age:29},
                         {name: "Tiancum", age: 35},
                             {name: "Jacob", age: 15},
                             {name: "Nephi", age: 75},
                             {name: "Enos", age: 7}
                             ];
            $scope.myDataB = [
                 {name:"Moroni",age:29},
                         {name:"Tiancum",age:35},
                             {name:"Jacob",age:15},
                             {name:"Nephi",age:75},
                             {name:"Enos",age:7}
                             ];

        $scope.gridOptionsA = { 
            data: 'myDataA'
            };

          $scope.gridOptionsB = { 
            data: 'myDataB'
            };

            $scope.gridOptionsList=[$scope.gridOptionsA,$scope.gridOptionsB];

            $scope.addPerson1=function(){
              $scope.myDataA.push({name: "Alex", age:30});

            }
             $scope.addPerson2=function(){
              $scope.myDataB.push({name: "Ben", age:40});
            }

        $scope.$on('ngGridEventData', function (event,gridId) {
          var filteredGrid=$scope.gridOptionsList.filter(function(grid){
            return grid.gridId==gridId;
          })
             $scope.filteredGrid=filteredGrid[0];
             //grid data
             $scope.filteredGridData=$scope.filteredGrid.ngGrid.data;
        });

实例:http://plnkr.co/edit/aFZ6YJ0cqHdRZNdasfJ6?p=preview