如何在不带html元素的情况下使用ng-repeat
如何在不带html元素的情况下使用ng-repeat
提问于 2012-07-15 17:49:57
我需要使用ng-repeat (在AngularJS中)列出数组中的所有元素。
复杂之处在于，数组中的每个元素都将转换为表的一行、两行或三行。
如果在元素上使用了ng-repeat，我无法创建有效的html，因为在<tbody>和<tr>之间不允许有重复的元素类型。
例如，如果我在<span>上使用ng-repeat，我会得到：
<table>
<tbody>
<span>
<tr>...</tr>
</span>
<span>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</span>
<span>
<tr>...</tr>
<tr>...</tr>
</span>
</tbody>
</table> 这是无效的html。
但我需要生成的是：
<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table> 其中第一行已由第一数组元素生成，接下来的三行由第二数组元素生成，第五和第六行由最后的数组元素生成。
我如何使用ng-repeat，使它所绑定的html元素在呈现过程中“消失”？
或者有其他解决方案吗？
澄清:生成的结构应该如下所示。每个数组元素可以生成表的1-3行。理想情况下，每个数组元素应该支持0-n行。
<table>
<tbody>
<!-- array element 0 -->
<tr>
<td>One row item</td>
</tr>
<!-- array element 1 -->
<tr>
<td>Three row item</td>
</tr>
<tr>
<td>Some product details</td>
</tr>
<tr>
<td>Customer ratings</td>
</tr>
<!-- array element 2 -->
<tr>
<td>Two row item</td>
</tr>
<tr>
<td>Full description</td>
</tr>
</tbody>
</table> 回答 7
Stack Overflow用户
发布于 2013-09-17 14:57:01
在AngularJS 1.2中，有一个名为ng-repeat-start的指令，它完全可以执行您所要求的操作。有关如何使用它的说明，请参阅my answer in this question。
Stack Overflow用户
发布于 2015-07-10 23:09:08
如果您使用ng > 1.2，下面是一个使用ng-repeat-start/end而不生成不必要标签的示例：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('mApp', []);
</script>
</head>
<body ng-app="mApp">
<table border="1" width="100%">
<tr ng-if="0" ng-repeat-start="elem in [{k: 'A', v: ['a1','a2']}, {k: 'B', v: ['b1']}, {k: 'C', v: ['c1','c2','c3']}]"></tr>
<tr>
<td rowspan="{{elem.v.length}}">{{elem.k}}</td>
<td>{{elem.v[0]}}</td>
</tr>
<tr ng-repeat="v in elem.v" ng-if="!$first">
<td>{{v}}</td>
</tr>
<tr ng-if="0" ng-repeat-end></tr>
</table>
</body>
</html>
要点:对于用于ng-repeat-start和ng-repeat-end的标签设置ng-if="0"，让其不被插入到页面中。通过这种方式，内部内容将完全按照knockoutjs中的方式进行处理(使用<!--...-->中的命令)，并且不会有垃圾。
Stack Overflow用户
发布于 2012-07-16 03:23:23
您可能希望在控制器中扁平化数据：
function MyCtrl ($scope) {
$scope.myData = [[1,2,3], [4,5,6], [7,8,9]];
$scope.flattened = function () {
var flat = [];
$scope.myData.forEach(function (item) {
flat.concat(item);
}
return flat;
}
}然后在HTML中：
<table>
<tbody>
<tr ng-repeat="item in flattened()"><td>{{item}}</td></tr>
</tbody>
</table>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11490968
复制相关文章
相似问题