Question

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

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

Answer 1

对不起，我不能发表评论。

您需要将控制器添加到您的模块，例如@ user2341963说。

app.controller('AccordionDemoCtrl', AccordionDemoCtrl);

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

ui-grid="{ data: mydata }"

mydata必须绑定到Controller for Angular中的$ scope才能查找/访问它。请参阅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;
}

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

1 个答案: