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

看看这个

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

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

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 3

这应该这样做。

    String auth = Credentials.basic(clientID, clientSecret);
    mTokenApi.refreshAccessToken(auth, "refresh_token", serverToken.refresh_token)

这是一个有效的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>

完整示例： -

＆＃13;

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

＆＃13;

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

＆＃13;

如何迭代AngularJS中的对象数组和打印键

4 个答案: