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.