How to iterate an array of objects and print key in AngularJS

Question

Following is the array of objects I am trying to iterate in ng-repeat and print keys, but unable to do so.

$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}},
];

Following is in my View -

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

But key is only printing 0,1,2,3 and so on but I want to print -

ngRepeat, ngView, ... likewise.

FYI - I am able to get the desired result from below mentioned array, but I am interested to achieve the same result from above array declaration.

Working -

$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},
];

End Output -

EDIT -

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

Answer 1

Have a look at this

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

Hope it will help :)

Edit: I've forked from your plnkr and modified it. You can do it like the following way http://plnkr.co/edit/txNJ81Z5hJDrDX8Zhhp2?p=preview

Answer 2

This will be one of the simple and straight approach :

 <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>

Full Example :--

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>

Answer 3

Other way is that you just make new object from array through loop:

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];
}

EDITED: then you can use:

    <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 4

This should do it.

  <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>

Here is a working plunkr of it.