Angular JS динамически создает нг-сетку в аккордеоне

Question

Angular JS динамически создает нг-сетку в аккордеоне

0

У меня проблема с созданием элементов аккордеона динамически с помощью ng-сетки внутри. Я могу создавать сетки динамически, но набор данных одинаковый во всей сетке. Я бы хотел, чтобы каждый

Мой код 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="[email protected]" 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>

SavvyGoat 20 авг. 2015, в 06:18

Источник

Теги:

javascript

angularjs

accordion

ng-grid

1 ответ

Ещё вопросы

Asqan · Accepted Answer · 2015-08-21T18-56-00.000Z

Каждый из них был правильным в вашем коде, за исключением использования индекса.

Функция 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