无法在控制器中使用ng-repeat生成angularjs表?

时间:2017-09-26 11:57:00

标签: javascript angularjs json angularjs-ng-repeat

我有以下示例代码段。我希望通过json在角度表中显示我的ng-repeat对象,我将从angular controller脚本生成该对象。我已经完成了以下操作,但我不确定为什么表格没有生成且它的数据没有显示。请告诉我,我不确定这里有什么问题。 Fiddle可用。

需要让输出变得像以下一样熟悉:

Text  IND   US    UK    AUS
No    100   200   170   50 

HTML:

<div ng-controller="TestCtrl">   
</div>

app.js:

var testmodule = angular.module('myModule', []);
testmodule.controller('TestCtrl', function ($scope) {
  $scope.mydata =  [{
    "a": ["IND", "US", "UK", "AUS"],
    "b": ["100", "200", "170", "50"],
    "c": "Text",
    "d": "No",
}];

var mytable= angular.element(' <div class="table-responsive"> <table class="table" ng-repeat="item in mydata track by $index"> <thead> <tr> <td>{{item.c}}</td><td ng-repeat="c1 in item.a track by $index">{{c1}}</td></tr></thead> <tbody> <tr> <td>{{p.d}}</td><td ng-repeat="d1 in p.b track by $index">{{d1}}</td></tr></tbody> </table> </div>');
console.log("mytable: "+JSON.stringify(mytable));
});

1 个答案:

答案 0 :(得分:0)

首先,我将html放在html页面上,而不是作为控制器中的元素。其次,您尝试访问p.dp.b,但这些字段位于您的ng-repeat item中(因此应为item.ditem.b。像这样工作:

HTML:

<div ng-controller="TestCtrl">   
  <div class="table-responsive"> 
      <table class="table" ng-repeat="item in mydata track by $index"> 
        <thead> 
          <tr> 
            <td>{{item.c}}</td>
            <td ng-repeat="c1 in item.a track by $index">{{c1}}</td>
          </tr>
        </thead> 
        <tbody> 
          <tr> 
            <td>{{item.d}}</td>
            <td ng-repeat="d1 in item.b track by $index">{{d1}}</td>
          </tr>
        </tbody> 
      </table>
  </div>
</div>

JavaScript的:

var testmodule = angular.module('myModule', []);
testmodule.controller('TestCtrl', function ($scope) {
  $scope.mydata =  [{
    "a": ["IND", "US", "UK", "AUS"],
    "b": ["100", "200", "170", "50"],
    "c": "Text",
    "d": "No",
}];

});

Working Plunker:HERE

-

<强>更新 因为你似乎想要将你的角元素输出到控制台,你应该知道mytable是一个角元素而不是一个json对象,所以你不能将它字符串化...... < / p>