Question

我在使用ng-grid动态创建手风琴元素时遇到问题。我可以动态创建网格，但数据集在所有网格中都是相同的。我想要每个

我的Plunker代码可在此处找到。我的代码看起来像这样。这是我的JS文件：

var app = angular.module('plunker', ['ngGrid', 'ui.bootstrap.transition', 'ui.bootstrap.collapse', 'ui.bootstrap.accordion']);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.name = 'World';
  $scope.dt = [
    [{
      processName: 'This is process 1',
      name: 'This is task 1',
      createTime: '23-07-2013 10:19:22'
    }, {
      processName: 'This is process 2',
      name: 'This is task 2',
      createTime: '24-07-2013 11:19:22'
    }, {
      processName: 'This is process 3',
      name: 'This is task 3',
      createTime: '25-07-2013 12:19:22'
    }, {
      processName: 'This is process 4',
      name: 'This is task 4',
      createTime: '26-07-2013 13:19:22'
    }],
    [{
      processName: 'This is process 111',
      name: 'This is task 111',
      createTime: '23-07-2013 10:19:22'
    }, {
      processName: 'This is process 222',
      name: 'This is task 222',
      createTime: '24-07-2013 11:19:22'
    }, {
      processName: 'This is process 333',
      name: 'This is task 333',
      createTime: '25-07-2013 12:19:22'
    }, {
      processName: 'This is process 444',
      name: 'This is task 444',
      createTime: '26-07-2013 13:19:22'
    }],
      [{
      processName: 'This is process 1111',
      name: 'This is task 111',
      createTime: '23-07-2013 10:19:22'
    }, {
      processName: 'This is process 2222',
      name: 'This is task 222',
      createTime: '24-07-2013 11:19:22'
    }, {
      processName: 'This is process 3333',
      name: 'This is task 333',
      createTime: '25-07-2013 12:19:22'
    }, {
      processName: 'This is process 4444',
      name: 'This is task 444',
      createTime: '26-07-2013 13:19:22'
    }]
  ];

  var templateWithTooltip = '<div class="ngCellText" data-ng-class="col.colIndex()"><span data-ng-cell-text title={{row.getProperty(col.field)}}>{{row.getProperty(col.field)}}</span></div>';

  $scope.createGrids = function() {
    var index = 0;

    angular.forEach($scope.dt, function(elem) {

      var dirtyConcat = 'dt[' + index + ']';
      $scope.rules=[];

      $timeout(function() {
        $scope.rules.push({
          description: 'Accordion ' + index,
          tasks: {
            data: dirtyConcat,
            enableCellSelection: true,
            enableRowSelection: false,
            enableCellEditOnFocus: true,
            columnDefs: [{
              field: 'processName',
              displayName: 'Process Name'
            }, {
              field: 'name',
              displayName: 'Details',
              editableCellTemplate: '<input type="text" ng-class=""colt" + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" data-placeholder="-- Select One --" />',
              enableFocusedCellEdit: true
            }]
          }

        });
++index;
       //console.log($scope.rules);

      }, 0);


    });

  };
  $scope.createGrids();

});

这是HTML：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.css" />

    <link data-require="bootstrap-css" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <script data-require="jquery" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>

    <script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
    <script src="accordion.js"></script>
    <script src="transition.js"></script>
    <script src="collapse.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.debug.js"></script>

  </head>

 <body ng-controller="MainCtrl">
    <p>ng grid inside accordion!</p>
    <accordion>
        <accordion-group heading="{{rule.description}} {{rule.tasks.length}}" ng-repeat="rule in rules">
            <div class="gridStyle" ng-grid="rule.tasks">
        </accordion-group>
    </accordion>
  </body>

</html>

Answer 1

除了使用索引之外，Everythin在您的代码中是正确的。

您的createGrids功能

 $scope.createGrids = function() {
var index = 0;
var i = 0
angular.forEach($scope.dt, function(elem) {

  var dirtyConcat = 'dt[' + index + ']';

  $scope.rules=[];

  $timeout(function() {
    $scope.rules.push({
      description: 'Accordion ' + i,
      tasks: {
        data: dirtyConcat,
        enableCellSelection: true,
        enableRowSelection: false,
        enableCellEditOnFocus: true,
        columnDefs: [{
          field: 'processName',
          displayName: 'Process Name'
        }, {
          field: 'name',
          displayName: 'Details',
          editableCellTemplate: '<input type="text" ng-class=""colt" + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" data-placeholder="-- Select One --" />',
          enableFocusedCellEdit: true
        }]
      }

    });
  i++;

   console.dir($scope.rules);
  }, 0);

  index++;
});

};
$scope.createGrids();

这是你工作的Plunker：

http://plnkr.co/edit/8GY5eDbYFyxd0JUeljpO?p=preview

Angular JS在手风琴中动态创建ng-grid

1 个答案: