Javascript accordion内的Angular JS ui网格无法显示数据_Javascript_Angularjs_Angular Ui Grid

Javascript accordion内的Angular JS ui网格无法显示数据

javascript angularjs

Javascript accordion内的Angular JS ui网格无法显示数据,javascript,angularjs,angular-ui-grid,Javascript,Angularjs,Angular Ui Grid,朋友们，我正在尝试动态构建一个手风琴，里面有一个ui网格。我遇到的问题是在网格中看不到任何数据。我需要第二双眼睛来看看我做错了什么这是我的HTML： <!doctype html> <html ng-app="myApp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> &l

朋友们，我正在尝试动态构建一个手风琴，里面有一个ui网格。我遇到的问题是在网格中看不到任何数据。我需要第二双眼睛来看看我做错了什么

这是我的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>

这是我的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;
}

//无保护
var-app=angular.module（'myApp'，['ui.bootstrap'，'ui.grid'，'ui.grid.cellNav'，'ui.grid.edit']）；
var json='[{“名称”：“服务请求”，“isOpen”：“假”，“组”：[{“名称”：“头”，“isOpen”：“假”，“网格”：[{“数据”：“myData”}]}，{“名称”：“细节1”，“isOpen”：“假”}]}，{“名称”：“服务确认”，“isOpen”：“假”，“组”：“}]；
var mydata='[{“firstName”：“Cox”，“lastName”：“Carney”，“company”：“Enormo”，“employed”：true}，{“firstName”：“loraine”，“lastName”：“Wise”，“company”：“Comveyer”，“employed”：false}，{“firstName”：“Nancy”，“lastName”：“Waters”，“company”：“Fuelton”，“employed”：false}；
var ari=JSON.parse（JSON）；
var accView=“”；
var accLevel=0；
var accName=“组”；
var gridName=“grid”；
var dataName=“{data:mydata}”；
var accBuild=功能（obj）{
if（类型（对象）=“对象”）{
用于（obj中的var i）{
accView=accView+“”；
accView=accView+“0）{
accView=accView+“+accName+”.groups\”中的accView+”>；
accView=accView+“”；
}否则{
“+accName+”\“中的accView=accView+”处于打开状态=“{{{{{（accName+accLevel）+”.isOpen}}\”>{{{{（accName+accLevel）+“.name}”；
}        
accName=accName+accLevel；
accLevel=accLevel+1；
accBuild（obj[i].组）；
accView=accView+“”；
}
}
};
accBuild（ary）；
//console.log（accView）；
document.all.akkordion.innerHTML=accView；
函数AccordionDemoCtrl（$scope）{
$scope.opened=函数（groupname）{
console.log（“打开的组：“+groupname”）；
};
$scope.groups=ary；
}

对不起，我不能发表评论

您需要将控制器添加到模块中，如@user2341963所述

app.controller('AccordionDemoCtrl', AccordionDemoCtrl);

如果你想像这样访问你的数据

ui-grid="{ data: mydata }"

mydata必须绑定到控制器中的$scope才能查找/访问它。请参阅

我看不到你在哪里注册你的控制器

app.controller（'AccordionDemoCtrl'，AccordionDemoCtrl）

？抛出一个异常innerHTML…document.all只在IE中工作…我让它显示在我的

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;
}