Friends, I'm trying to build an accordion dynamically with an ui-grid inside it. The problem i'm having is that i cannot see any data in my grids. I need a second pair of eyes to see what i'm doing wrong.
Here is my HTML:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.css" />
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
</head>
<body>
<div ng-controller="AccordionDemoCtrl" id="akkordion"></div>
</body>
</html>
And here is my JS:
//noprotect
var app = angular.module('myApp',['ui.bootstrap','ui.grid', 'ui.grid.cellNav', 'ui.grid.edit'] );
var json = '[{"name":"Service Request","isOpen":"false","groups":[{"name":"Header","isOpen":"false","grids":[{"data":"myData"}]},{"name":"Details 1","isOpen":"false"}]},{"name":"Service Confirmation","isOpen":"false","groups":""}]';
var mydata = '[{"firstName":"Cox","lastName":"Carney","company":"Enormo","employed":true},{"firstName":"Lorraine","lastName":"Wise","company":"Comveyer","employed":false},{"firstName":"Nancy","lastName":"Waters","company":"Fuelton","employed":false}]';
var ary = JSON.parse(json);
var accView = "";
var accLevel = 0;
var accName = "groups";
var gridName = "grid";
var dataName = "{ data: mydata }";
var accBuild = function (obj){
if (typeof(obj)==="object"){
for (var i in obj) {
accView = accView + "<accordion close-others=\"true\">";
accView = accView + "<accordion-group ng-repeat=\""+(accName+accLevel);
if(accLevel>0){
accView = accView + " in "+accName+".groups\" is-open=\"{{"+(accName+accLevel)+".isOpen}}\"><accordion-heading><div ng-click=\"opened("+(accName+accLevel)+".name)\">{{"+(accName+accLevel)+".name}}</div></accordion-heading></div>";
accView = accView + "<div id='" +(gridName+accLevel) + "'";
accView = accView + " ui-grid='" + dataName + "'></div>";
}else{
accView = accView + " in "+accName+"\" is-open=\"{{"+(accName+accLevel)+".isOpen}}\"><accordion-heading><div ng-click=\"opened("+(accName+accLevel)+".name)\">{{"+(accName+accLevel)+".name}}</div></accordion-heading>";
}
accName = accName+accLevel;
accLevel = accLevel + 1;
accBuild(obj[i].groups);
accView = accView + "</accordion-group></accordion>";
}
}
};
accBuild(ary);
//console.log(accView);
document.all.akkordion.innerHTML=accView;
function AccordionDemoCtrl($scope) {
$scope.opened = function (groupname) {
console.log("Opened group: "+ groupname);
};
$scope.groups = ary;
}
Sorry, I cant comment.
You need to add your Controller to your module, like @user2341963 said.
app.controller('AccordionDemoCtrl', AccordionDemoCtrl);
And if you want to access your data like this
ui-grid="{ data: mydata }"
mydata has to be bound to $scope in your Controller for Angular to find/access it. See the Updated JSBin .
app.controller('AccordionDemoCtrl', AccordionDemoCtrl);
function AccordionDemoCtrl($scope) {
$scope.mydata = [
{
test: 'test',
other: 'other'
},
{
test: 'test',
other: 'other'
},
{
test: 'test',
other: 'other'
},
];
$scope.opened = function (groupname) {
console.log("Opened group: "+ groupname);
};
$scope.groups = ary;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.