如何迭代AngularJS中的對象數組和打印鍵

Question

以下是我嘗試在ng-repeat和print鍵中迭代的對象數組，但無法這樣做。

$scope.directivesInfo = [ 
    {"ngRepeat": {"enter": true, "leave": true, "move": true, "add": false, "remove": false}}, 
    {"ngView": {"enter": true, "leave": true, "move": false, "add": false, "remove": false}}, 
    {"ngInclude": {"enter": true, "leave": true, "move": false, "add": false, "remove": false}}, 
    {"ngSwitch": {"enter": true, "leave": true, "move": false, "add": false, "remove": false}}, 
    {"ngIf": {"enter": true, "leave": true, "move": false, "add": false, "remove": false}}, 
    {"ngClass": {"enter": false, "leave": false, "move": false, "add": true, "remove": true}}, 
    {"ngShow/ngHide": {"enter": false, "leave": false, "move": false, "add": true, "remove": true}}, 
    {"form/ngModel": {"enter": false, "leave": false, "move": false, "add": true, "remove": true}}, 
    {"ngMessages": {"enter": false, "leave": false, "move": false, "add": true, "remove": true}}, 
    {"ngMessage": {"enter": true, "leave": true, "move": false, "add": false, "remove": false}}, 
]; 

以下是我認爲 -

<tr ng-repeat="(key, value) in directivesInfo"> 

但關鍵是隻有打印0,1,2,3等等，但我想打印 -

ngRepeat，ngView。 ..同樣。

僅供參考 - 我能夠從下面提到的數組中獲得所需的結果，但我有興趣從上面的數組聲明中獲得相同的結果。

工作 -

$scope.directivesInfo = [ 
    {"name":"ngRepeat", "enter": true, "leave": true, "move": true, "add": false, "remove": false}, 
    {"name":"ngView", "enter": true, "leave": true, "move": false, "add": false, "remove": false}, 
    {"name":"ngInclude", "enter": true, "leave": true, "move": false, "add": false, "remove": false}, 
    {"name":"ngSwitch", "enter": true, "leave": true, "move": false, "add": false, "remove": false}, 
    {"name":"ngIf", "enter": true, "leave": true, "move": false, "add": false, "remove": false}, 
    {"name":"ngClass", "enter": false, "leave": false, "move": false, "add": true, "remove": true}, 
    {"name":"ngShow/ngHide", "enter": false, "leave": false, "move": false, "add": true, "remove": true}, 
    {"name":"form/ngModel", "enter": false, "leave": false, "move": false, "add": true, "remove": true}, 
    {"name":"ngMessages", "enter": false, "leave": false, "move": false, "add": true, "remove": true}, 
    {"name":"ngMessage", "enter": true, "leave": true, "move": false, "add": false, "remove": false}, 
]; 

結束輸出 -

編輯 -

Plnkr - http://plnkr.co/edit/vJ7pQmAYoIPpnVTi1vNi?p=preview

Answer 1

另一種方法是，你只是通過循環使從數組新的對象：

Demo

.... 
$scope.directivesInfoObject = {}; 

for (var i = 0; i < $scope.directivesInfo.length; i++) { 
    var key = Object.keys($scope.directivesInfo[i])[0]; 
    $scope.directivesInfoObject[key] = $scope.directivesInfo[i][key]; 
} 

編輯：那麼你可以使用：

<tr ng-repeat="(key,value) in directivesInfoObject"> 
     <td> {{key}} </td> 
     <td ng-repeat="(innerKey,innerValue) in value"> 
     <input type=checkbox ng-model="directivesInfoObject[key][innerKey]"> 
     </td> 
    </tr> 

Answer 2

看一看這

<div ng-repeat="item in directivesInfo"> 
    <div ng-repeat="(key,value) in item">{{key}}<div> 
</div> 

希望這將有助於:)

編輯：我從你的plnkr分叉和修改它。你可以像下面這樣做http://plnkr.co/edit/txNJ81Z5hJDrDX8Zhhp2?p=preview

Answer 3

這應該做到這一點。

<tr ng-repeat="item in directiveinfo"> 
     <td> {{item.name}} </td> 
     <td ng-repeat="(key,value) in item"> 
     <input type=checkbox ng-model="value"> 
     </td> 
    </tr> 

這是一個工作plunkr它。

Answer 4

這將是一個簡單而直接的方法：

<table> 
    <tr ng-repeat="item in directivesInfo track by $index"> 
    <td>{{item.name}} </td> 
    <td ng-repeat="(key,value) in item" ng-if="$index != 0"> 
     <input type="checkbox" ng-model="item[key]"> 
    </td> 
    </tr> 
</table> 

完整的例子： -

angular.module('app', []).controller('MyController', ['$scope', 
 
    function($scope) { 
 

 
    $scope.directivesInfo = [ 
 
    {"name":"ngRepeat", "enter": true, "leave": true, "move": true, "add": false, "remove": false}, 
 
    {"name":"ngView", "enter": true, "leave": true, "move": false, "add": false, "remove": false}, 
 
    {"name":"ngInclude", "enter": true, "leave": true, "move": false, "add": false, "remove": false}, 
 
    {"name":"ngSwitch", "enter": true, "leave": true, "move": false, "add": false, "remove": false}, 
 
    {"name":"ngIf", "enter": true, "leave": true, "move": false, "add": false, "remove": false}, 
 
    {"name":"ngClass", "enter": false, "leave": false, "move": false, "add": true, "remove": true}, 
 
    {"name":"ngShow/ngHide", "enter": false, "leave": false, "move": false, "add": true, "remove": true}, 
 
    {"name":"form/ngModel", "enter": false, "leave": false, "move": false, "add": true, "remove": true}, 
 
    {"name":"ngMessages", "enter": false, "leave": false, "move": false, "add": true, "remove": true}, 
 
    {"name":"ngMessage", "enter": true, "leave": true, "move": false, "add": false, "remove": false}, 
 
]; 
 

 
}]);

<html ng-app="app"> 
 

 
<head> 
 
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="MyController"> 
 
    <table border="1"> 
 
    <thead> 
 
     <tr> 
 
     <th>Directive Name</th> 
 
     <th>Enter</th> 
 
     <th>Leave</th> 
 
     <th>Move</th> 
 
     <th>Add</th> 
 
     <th>Remove</th> 
 
     </tr> 
 
    </thead> 
 
    <tr ng-repeat="item in directivesInfo track by $index"> 
 
     <td>{{item.name}}</td> 
 
     <td ng-repeat="(key,value) in item" ng-if="$index != 0"> 
 
     <input type="checkbox" ng-model="item[key]"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <br/> 
 
    <hr/>{{directivesInfo}} 
 
</body> 
 
</html>