手风琴中的Angular JS ui-grid无法显示数据

Question

Friends, I'm trying to build an accordion dynamically with an ui-grid inside it. 朋友，我正在尝试使用内置的ui-grid动态构建手风琴。 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: 这是我的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: 这是我的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;
}

Answer 1

Sorry, I cant comment. 对不起，我不能发表评论。

You need to add your Controller to your module, like @user2341963 said. 您需要将Controller添加到模块中，如@ user2341963所示。

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. mydata必须绑定到Controller的$ scope中，Angular才能查找/访问它。 See the Updated JSBin . 请参阅更新的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;
}

手风琴中的Angular JS ui-grid无法显示数据

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-09-15 09:28:57

手风琴中的Angular JS ui-grid无法显示数据

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-09-15 09:28:57

解决方案1
0 已采纳 2015-09-15 09:28:57