如何迭代AngularJS中的对象数组和打印键 [英] How to iterate an array of objects and print key in AngularJS

问题描述

以下是我尝试在ng-repeat和打印键中迭代的对象数组，但无法这样做。

  $ 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， 离开：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：{e nter：false，保留：false，move：false，add：true，remove：true}}，
 {ngMessage：{enter：true，leave ：true，move：false，add：false，remove：false}}，
]; 
  

以下是我的观点 -

 < trng-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，输入：false，离开：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 -

解决方案

其他方式是你只需要通过循环从数组中创建新对象：

演示

  .... 
 $ 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） 
< input type = checkbox ng-model =directivesInfoObject [key] [innerKey]> 
< / td> 
< / tr> 
  

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

解决方案

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>

这篇关于如何迭代AngularJS中的对象数组和打印键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！