使用 ng-repeat 将静态表更改为动态表
Posted
技术标签:
【中文标题】使用 ng-repeat 将静态表更改为动态表【英文标题】：Change static table to dynamic using ng-repeat 【发布时间】：2018-06-24 22:07:26 【问题描述】：我有一个作为父子结构的 JSON，我将它显示在一个表格中，该表格在单击行时展开，显示其子元素。
该表适用于静态数据。
我正在尝试使用 angular ng-repeat 使用下面的 JSON 使其动态化，但是
卡在中间，因为我无法使用 <tr> 重复子元素
请找小伙伴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
]
]
]
【问题讨论】：
【参考方案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 将静态表更改为动态表的主要内容，如果未能解决你的问题，请参考以下文章
如何将使用 ng-repeat 动态创建的 html 表单的输入元素的值传递给 ng-controller
Angularjs列表项边距问题将ng-repeat元素与静态元素结合起来