Question

我有一个2d数组，其数据类似于此，

categoryinfo[0][0] = {"name": "apple", "category": { "name": "fruits","id": "09a8597d"}}

categoryinfo[0][1] = {"name": "orange", "category": { "name": "fruits","id": "09a8697d"}}

categoryinfo[1][0] = {"name": "fish", "category": { "name": "meat","id": "09a8447d"}}

我想根据类别显示这些数据，正如您可以看到[0]，索引包含所有水果项目，[1]索引包含所有肉类项目。

我想将它们显示为，

水果

苹果
橙

的肉

鱼

<table>
      <thead>
      <tr>
        <th>{{categoryinfo[0][0].category.name}}</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="formnames in categoryinfo">
        <td>{{formnames[0].name}}</td>
      </tr>
      <tr ng-repeat="formnames in categoryinfo">
        <td>{{formnames[1].name}}</td>
      </tr>
      </tbody>
</table>

更具体的内容如上所述。但我无法弄清楚如何在没有像这样的硬编码的情况下动态地做到这一点。

Answer 1

你用$ index重复它们。

第一次迭代迭代y（垂直），然后内部的一次迭代给出x（水平）值。

看看下面的代码。

＆＃13;

var app = angular.module('repeatSamples', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.categoryinfo = [];
  $scope.categoryinfo[0] = []
  $scope.categoryinfo[0][0] = {
    "name": "apple",
    "category": {
      "name": "fruits",
      "id": "09a8597d"
    }
  }

  $scope.categoryinfo[0][1] = {
    "name": "orange",
    "category": {
      "name": "fruits",
      "id": "09a8697d"
    }
  }

  $scope.categoryinfo[1] = []
  $scope.categoryinfo[1][0] = {
    "name": "fish",
    "category": {
      "name": "meat",
      "id": "09a8447d"
    }
  }

  $scope.categoryinfo[1][1] = {
    "name": "mutton",
    "category": {
      "name": "meat",
      "id": "09a8447d"
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<body ng-app="repeatSamples" ng-controller="MainCtrl">

  <table class="table-bordered" ng-repeat="category in categoryinfo">
    <thead>
      <tr>
        <th>{{category[$index].category.name}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="formnames in categoryinfo[$index]">
        <td>{{formnames.name}}</td>
      </tr>
    </tbody>
  </table>
</body>

＆＃13;

Answer 2

2D数组只是数组中的数组，只需逐层遍历它们即可。

<table>
      <thead ng-repeat-start="category in categoryinfo">
      <tr>
        <th>{{category[0].category.name}}</th>
      </tr>
      </thead>
      <tbody ng-repeat-end>
      <tr ng-repeat="item in category">
        <td>{{item.name}}</td>
      </tr>
      </tbody>
</table>

Answer 3

作为评论，

我想应该这样做，虽然没有尝试<div ng-repeat="c in category"><h3>{{c[0].category.name}} <p ng-repeat="list in c">{{list.name}}</h3>

<强>观

由于你有二维数组，你将不得不使用2个循环。一个迭代父列表，另一个循环遍历子列表。

此外，由于您已经根据类别对项目进行了分组，因此您可以访问标题的第一个元素。

如果数据结构未修复且您可以更改它，则可以考虑创建一个hashmap。您仍然需要2个循环，但这可能会使检索数据变得更容易。

function MainCtrl($scope) {
  $scope.categoryInfo = {
    fruits: [
      {"name": "apple","id": "09a8597d"},
      {"name": "orange", "id": "09a8697d"}
    ],
    meat: [
      {"name": "fish", "id": "09a8447d"}
    ]
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<body ng-app ng-controller="MainCtrl">

  <div ng-repeat="(key, value) in categoryInfo">
    <h3>{{key}} </h3>
    <p ng-repeat="list in value">{{list.name}}</p>
  </div>
</body>

示例代码：

function MainCtrl($scope) {
  var categoryInfo = [[],[]]
  categoryInfo[0][0] = {"name": "apple", "category": { "name": "fruits","id": "09a8597d"}}
  categoryInfo[0][1] = {"name": "orange", "category": { "name": "fruits","id": "09a8697d"}}
  categoryInfo[1][0] = {"name": "fish", "category": { "name": "meat","id": "09a8447d"}}
  
  $scope.categoryInfo = categoryInfo;
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<body ng-app ng-controller="MainCtrl">

  <div ng-repeat="c in categoryInfo">
    <h3>{{c[0].category.name}} </h3>
    <p ng-repeat="list in c">{{list.name}}</p>
  </div>
</body>

如何将二维数组值添加到ng-repeat

水果

的肉

3 个答案: