我在使用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="[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>
最佳答案
除了使用索引，其他所有内容在您的代码中都是正确的。
您的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();
这是您的工作柱塞：
http://plnkr.co/edit/8GY5eDbYFyxd0JUeljpO?p=preview
关于javascript - Angular JS在 Accordion 中动态创建ng-grid，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32109452/