Question

我有一个像这样简单的json：

<tr>
    <td> fruit </td>
    <td> 1 </td>
    <td> banana </td>
    <td> edible </td>
</tr>
<tr>
    <td> fruit </td>
    <td> 1 </td>
    <td> apple </td>
    <td> edible </td>
</tr>
<tr>
    <td> vegetable </td>
    <td> 2 </td>
    <td> eggplant </td>
    <td> edible </td>
</tr>
<tr>
    <td> vegetable </td>
    <td> 2 </td>
    <td> poison ivy </td>
    <td> inedible </td>
</tr>

我希望我的表格具有以下格式：

<tr ng-repeat = "item in fruit in fruits">
    <td> {{fruit.type}} </td>
    <td> {{fruit.id}} </td>
    <td> {{item.name}} </td>
    <td> {{item.type}} </td>
</tr>

但是我似乎不能用ng-repeat做这个，因为我不能嵌套循环，所以这样的东西不会起作用：

{{1}}

我应该以某种方式崩溃我的json，以便没有嵌套数组？或者有角度来解析这个吗？我尝试过使用过滤器功能，但没有用。如果有人能帮助我理解我如何达到预期的结果或指出我正确的方向，我将非常感激。

Answer 1

<span ng-repeat="category in fruits">
    <tr ng-repeat = "fruit in category.content">
        <td> {{category.type}} </td>
        <td> {{category.id}} </td>
        <td> {{fruit.name}} </td>
        <td> {{fruit.type}} </td>
    </tr>
</span>

或

你需要从当前的

重建一个新对象

Answer 2

如果你不想嵌套ng-repeats，你可以重新映射对象，就像这样

var allFruitsTransformed = [];
fruits.forEach(function(fruit) {
  fruit.content.forEach(function(v) {
    allFruitsTransformed.push({
      itemType: fruit.type,
      id: fruit.id,
      name: v.name,
      type: v.type 
    });
  });
});

然后以角度循环通过它们：

<tr ng-repeat = "fruit in allFruitsTransformed">
    <td> {{fruit.itemType}} </td>
    <td> {{fruit.id}} </td>
    <td> {{fruit.name}} </td>
    <td> {{fruit.type}} </td>
</tr>

Answer 3

试试这种方式。希望这将按预期工作

<table border="1">
    <tbody ng-repeat="item in fruits">
        <tr ng-repeat="itemUnit in item.content">
            <td>{{item.type}}</td>
            <td>{{item.id}}</td>
            <td>{{itemUnit.name}}</td>
            <td>{{itemUnit.type}}</td>
        </tr>
    </tbody>
  </table>

Answer 4

HTML元素

<my-table fruits="fruits"></my-table>

自定义表格指令

app.directive('myTable', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var html = '<table>';
            angular.forEach(scope[attrs.fruits], function (fruit) {
                angular.forEach(fruit.content, function (content) {
                  html += '<tr><td>' + fruit.id + '</td>';
                  html += '<td>' + fruit.type + '</td>';
                  html += '<td>' + content.name + '</td>';
                  html += '<td>' + content.type + '</td></tr>';
                });
            });
            html += '</table>';
            element.replaceWith(html)
        }
    }
});

- SJ

带有ng-repeat表的嵌套数组

4 个答案: