如何在角度 ng-repeat 中创建新行？
Posted
技术标签:
【中文标题】如何在角度 ng-repeat 中创建新行？【英文标题】：How do I create a new row inside an angular ng-repeat? 【发布时间】：2015-11-04 14:49:05 【问题描述】：我有一个 ng-repeat 创建行，我想定期插入一个新行，但是创建它的逻辑是在行内部并最终弄乱了嵌套，例如：
<tr ng-repeat='item in items'>
<!-- this doesn't work well -->
<tr ng-if='items[$index].day != items[$index-1].day'>
<td colspan=2>
NEW DAY
</td>
</tr>
<td>item.name</td>
<td>item.day</td>
</tr>
每当日期发生变化时，我都希望在数据行中添加“日期分隔符”行。
【问题讨论】：
你能详细解释一下你到底想做什么吗？ 可能为 ~else~ 条件添加一个空的td，例如：<td ng-if='items[$index].day == items[$index-1].day' colspan=22></td>
@Pankaj Parkar 在代码中打错字，已经编辑应该更有意义还说，每当 item.day 更改时，我希望数据行中的“NEW DAY”行。
@nickponline 你不能将tr 嵌套在另一个tr 中。那不是有效的html
通过工作演示查看第一个答案：***.com/questions/30424507/…
【参考方案1】：
您可以使用重复开始和重复结束：
<tr ng-repeat-start="item in items">
<td>item.name</td>
<td>item.day</td>
</tr>
<tr ng-repeat-end>
<td colspan="2">
</tr>
【讨论】：
【参考方案2】：请试试这个
<body ng-app="ngAnimate">
Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br/>
<div>
Show:
<div class="check-element animate-show" ng-show="checked">
<span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
</div>
</div>
<div>
Hide:
<div class="check-element animate-show" ng-hide="checked">
<span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
</div>
</div>
</body>
Demo
【讨论】：
【参考方案3】：虽然看起来很恶心，但这很有效：
<tr ng-repeat-start='item in items'>
<tr ng-if='items[$index].day != items[$index-1].day'>
<td colspan=2>
NEW DAY
</td>
</tr>
<td>item.name</td>
<td>item.day</td>
</tr>
<!-- dummy row -->
<tr ng-repeat-end></tr>
【讨论】：
【参考方案4】：听起来您可能希望按天对数据进行分组并执行两个嵌套的重复器。
angular.module('app', []);
angular.module('app').controller('Ctrl', function($scope)
$scope.rows = [
name: 'one', day: 'monday' ,
name: 'two', day: 'monday' ,
name: 'three', day: 'tuesday' ,
name: 'four', day: 'tuesday' ,
name: 'five', day: 'thursday'
];
var groupBy = function(arr, property) // you can use Underscore instead
var output = ;
for (var i = 0; i < arr.length; i++)
var item = arr[i];
if (typeof output[item[property]] === 'undefined')
output[item[property]] = [];
if (item.hasOwnProperty(property))
output[item[property]].push(item);
return output;
;
$scope.groupedRows = groupBy($scope.rows, 'day');
);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Ctrl">
<table>
<!-- it's valid to have more than one tbody -->
<tbody ng-repeat="(key, group) in groupedRows">
<tr>
<th colspan="2">key</th>
</tr>
<tr ng-repeat="row in group">
<td>row.name</td>
<td>row.day</td>
</tr>
</tbody>
</table>
</div>
</div>注意：如果您希望分组的行正确排序，您可能希望将您的日期存储为一个整数，并且只更改它的显示方式。由于您不能“实际上”对对象键进行排序，因此它们会在 JS 引擎中按字母顺序自动排序，如果它们是数字，则可以对其进行正确排序。
【讨论】：
【参考方案5】：更新
如果在你的控制器中有一个新方法，比如isDivider(item)，它会返回布尔值。
我没有对此进行测试，但它应该可以工作：
<tr ng-repeat='item in items'>
<td ng-if="isDivider(item)==true" colspan=2>NEW DAY<td>
<td ng-if="isDivider(item)==false">item.name</td>
<td ng-if="isDivider(item)==false">item.day</td>
</tr>
【讨论】：
这将创建所有数据，然后创建所有日期分隔线。当日期发生变化时，我想要数据中的日期分隔符行。【参考方案6】：您可以使用 ng-repeat-start 和 ng-repeat-end 如下：
<tr ng-repeat-start="item in items">
<td>item.name</td>
<td>item.day</td>
</tr>
<tr ng-repeat-end>
<td>Expand/collapse content</td>
</tr>
Demo
【讨论】：
哇，不知道这一点，比我的解决方案更简单，更友好。 +1。 OP，您将希望在ng-repeat-end 旁边使用 ng-show/ng-hide。
这不会将展开/折叠上下文作为第一行。
以上是关于如何在角度 ng-repeat 中创建新行？的主要内容，如果未能解决你的问题，请参考以下文章
在角度 1 中，如何对我的 ng-repeats 进行分页？
angular-datatables - 当在组件控制器中调用 $onChanges 事件时，ng-repeat 不会用新行更新数据表