无法在控制器中使用 ng-repeat 生成 angularjs table?
Unable to generate angularjs table with ng-repeat in controller?
我有以下示例片段。我想在 angular table 到 ng-repeat
中显示下面的 json
对象,这是我从 angular controller
脚本生成的。我已经完成了以下操作,但我不确定为什么 table 没有生成并且它的数据没有显示。请让我知道,我不确定这里出了什么问题。 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));
});
首先,我将 html 放在 html 页面上,而不是作为控制器中的一个元素。其次,您尝试访问 p.d
和 p.b
,但这些字段在您的 ng-repeat 中的 item
中(因此应该是 item.d
和 item.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",
}];
});
工作的 Plunker:HERE
-
更新:
由于您似乎想将 angular 元素输出到控制台,因此您应该知道 mytable 是一个 angular 元素而不是 json 对象,因此 您不会能够将其字符串化...
我有以下示例片段。我想在 angular table 到 ng-repeat
中显示下面的 json
对象,这是我从 angular controller
脚本生成的。我已经完成了以下操作,但我不确定为什么 table 没有生成并且它的数据没有显示。请让我知道,我不确定这里出了什么问题。 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));
});
首先,我将 html 放在 html 页面上,而不是作为控制器中的一个元素。其次,您尝试访问 p.d
和 p.b
,但这些字段在您的 ng-repeat 中的 item
中(因此应该是 item.d
和 item.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",
}];
});
工作的 Plunker:HERE
-
更新: 由于您似乎想将 angular 元素输出到控制台,因此您应该知道 mytable 是一个 angular 元素而不是 json 对象,因此 您不会能够将其字符串化...