AngularJS 嵌套数组中的 ng-repeat

Question

我有问题。我有一个数组。

myArray = [{ 
 "John": [{"salary":"15K","year":"2013"},{"salary":"20K","year":"2014"}]
},{
 "Ben": [{"salary":"17K","year":"2013"},{"salary":"20K","year":"2014"},{"salary":"25K","year":"2014"}]
 }];

我希望它显示在一个 table.The 数组中可以有更多的数据。请有人告诉我，如果我排列错误或什么的。我现在被困在这个问题上一段时间了。

Answer 1

这样试试。

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  
  $scope.myArray=
   [
    { 
      "John":
       [
         {"salary":"15K","year":"2013"},
         {"salary":"20K","year":"2014"}
       ]
    },
    {
     "Ben":
      [
        {"salary":"17K","year":"2013"},
        {"salary":"20K","year":"2014"},
        {"salary":"25K","year":"2014"}
      ]
    }
  ];
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
    <table>
      <thead>
         <th>Name</th>
         <th>Info</th>
       </thead>
      <tbody ng-repeat="(key,value) in myArray">
        <tr ng-repeat="(key1,value1) in value">
          <td>{{key1}} :</td>
          <td ng-repeat="d in value1">
            <table>
              <thead>
                  <th>Salary</th>
                  <th>Year</th>
              </thead>
                 <tr>
                   <td>{{d.salary}}</td>
                   <td>{{d.year}}</td>
                 </tr>
            </table>
          </td>
        </tr>
      </tbody>
      </table>
</div>

Answer 2

angular.module("sa", []).controller("foo", function($scope) {

  $scope.myArray = [{
    "John": [{
      "salary": "15K",
      "year": "2013"
    }, {
      "salary": "20K",
      "year": "2014"
    }]
  }, {
    "Ben": [{
      "salary": "17K",
      "year": "2013"
    }, {
      "salary": "20K",
      "year": "2014"
    }, {
      "salary": "25K",
      "year": "2014"
    }]
  }];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="foo">
  <div ng-repeat="(key, value) in myArray">
    <div ng-repeat="(name, salaries) in value">
      <strong>{{name}}</strong>
      <br>
      <div ng-repeat="data in salaries">
        Salary: {{data.salary}} in {{data.year}}
      </div>
      <hr>
    </div>
  </div>

Answer 3

每个用户 table：

http://plnkr.co/edit/LSkW8mWwloDF65iahbAH?p=preview

  <div ng-repeat="user in users">
     <div ng-repeat="(key,value) in user">
       {{key}}
       <table>
         <tr>
           <th>salary</th>
           <th>year</th>
         </tr>
         <tr ng-repeat="s in value">
           <td>{{s.salary}}</td>
           <td>{{s.year}}</td>
         </tr>
       </table>
    </div>
    <br>

  </div>

在控制器中：

 $scope.users=[{ 
 "John":[{"salary":"15K","year":"2013"},{"salary":"20K","year":"2014"}]
},{
 "Ben":[{"salary":"17K","year":"2013"},{"salary":"20K","year":"2014"},{"salary":"25K","year":"2014"}]
 }];

Answer 4

如果您指定 table 的格式就好了。如果你想要一个像 table 这样的 table-heads 作为名称和值。在名称中，我们可以显示名称和内部值，还有另一个 table 的薪水和年份。对于这样的 table，您可以按照以下步骤操作。

<table>
  <tr>
    <th>Name</th>
    <th>Values</th>
  </tr>
  <tr ng-repeat="person in myArray">
    <td>{{person.name}}</td>
    <td>
      <table>
        <tr>
          <th>Salary</th>
          <th>Year</th>
        </tr>
        <tr ng-repeat="each in person">
          <td>{{each.salary}}<td>
          <td>{{each.year}}<td>
        </tr>
      </table>
    </td>
  </tr>
</table>

AngularJS 嵌套数组中的 ng-repeat

ng-repeat in nested array in AngularJS

json

angularjs

ng-repeat

angularjs-ng-repeat