Question

我有一个JSON，它是一个父子结构，我将它显示在一个表中，该表扩展了行的点击，显示了它的子元素。

该表适用于静态数据。

我正在尝试使用角度为ng-repeat的下面的JSON使其动态化卡在中间因为我无法使用<tr>

重复子元素

请找到plunker here 的 JSON：

{

  "fruit": [
    {
      "fruitName": "All",
      "season": [
        {
          "seasonName": "All",
          "yearValues": [
            {
              "year": 2017,
              "value": 200
            },
            {
              "year": 2018,
              "value": 200
            }
          ]
        },
        {
          "seasonName": "Sept",
          "yearValues": [
            {
              "year": 2017,
              "value": 100
            },
            {
              "year": 2018,
              "value": 100
            }
          ]
        },
        {
          "seasonName": "Oct",
          "yearValues": [
            {
              "year": 2017,
              "value": 100
            },
            {
              "year": 2018,
              "value": 100
            }
          ]
        }
      ]
    },
    {
      "fruitName": "Orange",
      "season": [
        {
          "seasonName": "All",
          "yearValues": [
            {
              "year": 2017,
              "value": 100
            },
            {
              "year": 2018,
              "value": 100
            }
          ]
        },
        {
          "seasonName": "Sept",
          "yearValues": [
            {
              "year": 2017,
              "value": 50
            },
            {
              "year": 2018,
              "value": 50
            }
          ]
        },
        {
          "seasonName": "Oct",
          "yearValues": [
            {
              "year": 2017,
              "value": 50
            },
            {
              "year": 2018,
              "value": 50
            }
          ]
        }
      ]
    },
    {
      "fruitName": "Grapes",
      "season": [
        {
          "seasonName": "All",
          "yearValues": [
            {
              "year": 2017,
              "value": 100
            },
            {
              "year": 2018,
              "value": 100
            }
          ]
        },
        {
          "seasonName": "Sept",
          "yearValues": [
            {
              "year": 2017,
              "value": 50
            },
            {
              "year": 2018,
              "value": 50
            }
          ]
        },
        {
          "seasonName": "Oct",
          "yearValues": [
            {
              "year": 2017,
              "value": 50
            },
            {
              "year": 2018,
              "value": 50
            }
          ]
        }
      ]
    }
  ]
}

Answer 1

你可以这样做：

        <tbody>
            <tr data-toggle="collapse" data-target=".order11" ng-repeat="item in result.fruit">
                <td>{{item.fruitName}}</td>
                <td>All</td>
                <td>{{getValue(item, '2017');}}</td>
                <td>{{getValue(item, '2018');}}</td>
                <td>{{getValue(item, '2017') + getValue(item, '2018');}}</td>
            </tr>
            <tr class="collapse order11">
                <td></td>
                <td>Sept</td>
                <td>100</td>
                <td>100 </td>
                <td>200</td>
            </tr>
            <tr class="collapse order11">
                <td></td>
                <td>Oct</td>
                <td>100</td>
                <td>100 </td>
                <td>200</td>
            </tr>                        
        </tbody>

将getValue在控制器中定义为：

app.controller('MainCtrl', function($scope) {
    $scope.result = ...

    $scope.getValue = function(fruitItem, year) {
      var res = fruitItem.season[0].yearValues.filter(function(yearValues) {
        return yearValues["year"] == year;
      });
      return res[0].value;
    }
});

Here是一个吸血鬼。

然后，如果您需要为每个季节执行此操作，则只需在getValue函数中添加新参数

使用ng-repeat将静态表更改为动态

1 个答案: