AngularJS中的动态ng-repeat
[英]Dynamic ng-repeat in AngularJS
问题描述
我的角度控制器是
$scope.dyna = [
{ "name": "parshuram", "age": 24 },
{ "name": "Tejash", "age": 26 },
{ "name": "Vinayak", "age": 25 }
];
我的HTML
<table>
<tbody>
<tr ng-repeat="test in dyna">
<td>{{test.name}}</td>
<td>{{test.age}}</td>
</tr>
</tboody>
</table>
这可以正常工作，并输出
Parshuram 24
Tejash 26
但是，如果将另一个变量添加到我的范围变量中，则需要在html表中进行更改：
$scope.dyna = [
{ "name": "parshuram", "age": 24 ,"void": true},
{ "name": "Tejash", "age": 26,"void" : false }
];
<table>
<tbody>
<tr ng-repeat= "test in dyna">
<td>{{test.name}}</td>
<td>{{test.age}}</td>
<!-- I don't want to have to add this, the columns should be added dynamically -->
<td>{{test.void}}</td>
</tr>
</tboody>
</table>
在那种情况下，是否可以动态生成列，例如通过从作用域获取我所有的对象变量？
5 个解决方案
解决方案1
3 已采纳 2016-11-25 08:14:30
<table>
<tbody>
<tr ng-repeat= "test in dyna">
<td ng-repeat="(key, value) in test">
{{value}}
</td>
</tr>
</tbody>
</table>
但是，如上面链接的文档所述，与适用于数组的ng-repeat相比，存在一些限制：
JavaScript规范没有定义为对象返回的键的顺序，因此Angular依赖于在myObj中为键运行时浏览器返回的顺序。 浏览器通常遵循按定义顺序提供密钥的策略，尽管在删除和恢复密钥后会有例外。 有关更多信息，请参阅MDN页面上的delete。
ngRepeat会默默地忽略以$开头的对象键，因为它是Angular用于public（$）和private（$$）属性的前缀。
内置的过滤器orderBy和filter不适用于对象，如果与对象一起使用将引发错误。
解决方案2
2 2016-11-25 08:03:04
您应该能够通过（键，值）迭代来做到这一点。
有小提琴来验证会很好，但是会像这样：
<tr ng-repeat= "test in dyna">
<td ng-repeat="(key,value) in test">{{value}}</td>
</tr>
解决方案3
0 2016-11-25 08:47:14
如果在“运行时”，我不知道。 除此以外：
<div ng-controller="MyCtrl">
<table>
<tbody>
<tr ng-repeat= "test in dyna">
<td ng-repeat="key in objectKeys(test)">{{test[key]}}</td>
</tr>
</tbody>
</table>
</div>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.dyna = [
{ "name": "parshuram", "age": 24 },
{ "name": "Tejash", "age": 26 },
{ "name": "Vinayak", "age": 25 }
];
$scope.objectKeys = function (object) {
var keys = Object.keys(object);
keys.splice(keys.indexOf('$$hashKey', 1))
return keys;
}
}
解决方案4
0 2016-11-26 11:25:26
HTML
<html>
<script src="library/angular.min.js"></script>
<script src="practice.js"></script>
<head>
</head>
<body ng-app="app">
<div ng-controller="test1" ng-bind-html="result">
</div>
</body>
</html>
Angularjs
angular.module('app',[]).controller('test1',['$scope','$compile','$sce',function($scope,$compile,$sce){
$scope.dyna = [
{ "name": "parshuram", "age": 24 },
{ "name": "Tejash", "age": 26 },
{ "name": "Vinayak", "age": 25 }
];
$scope.result="<table><tbody>";
for(var i=0;i<$scope.dyna.length;i++){
$scope.result+="<tr>";
for(var key in $scope.dyna[i])
if($scope.dyna[i].hasOwnProperty(key))
$scope.result+='<td>'+$scope.dyna[i][key]+'</td>';
$scope.result+="</tr>";
}
$scope.result+="</tbody></table>";
$scope.result=$sce.trustAsHtml($scope.result);
}]);
这是在控制器中创建html的另一种方法。
解决方案5
-2 2016-11-25 07:58:28
只需再次使它在循环中为测试变量添加另一个ng-repeat即可：
$scope.dyna = [{ "name": "parshuram", "age": 24 ,"void": true}, { "name": "Tejash", "age": 26,"void" : false }];
<table>
<tbody>
<tr ng-repeat= "test in dyna">
<td ng-repeat="t in test">{{test[t]}</td> // just like this
</tr>
</tboody>
</table>
使AngularJS中的嵌套ng-repeat动态化
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.