使用<td> -js在同一行上显示多个角度元素
使用<td> -js在同一行上显示多个角度元素
提问于 2015-04-14 05:07:20
下面的代码显示ng-repeat中的数据。我尝试在每显示5个元素后添加一个新行：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var json = {
"modules":
[
{
"category":"Sport",
"title":"Sport New Title",
"description" : "Sport This is description",
"fullDescription" : "fullDescription Sport This is description",
"hrefLink" : "http://www.google.com",
"hrefTitle" : "Google",
"dateAdded" : "11-11-11"
},
{
"category":"News",
"title":"Scala New Title",
"description" : "Scala This is description",
"fullDescription" : "fullDescription Sport This is description",
"hrefLink" : "http://www.google.com",
"hrefTitle" : "Google",
"dateAdded" : "11-11-11"
},
{
"category":"Scala",
"title":"Scala New Title",
"description" : "Scala This is description",
"fullDescription" : "fullDescription Sport This is description",
"hrefLink" : "http://www.google.com",
"hrefTitle" : "Google",
"dateAdded" : "11-11-11"
}
]
};
$scope.ocw = json;
});
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<script src="app.js"></script>
</head>
Search: <input ng-model="searchText">
<body ng-controller="MainCtrl">
<table class="table table-bordered" ng-repeat="module in ocw.modules | filter:searchText">
<td>
<h3 class="moduletitle">{{ module.category }} {{$index}}</h3>
<p>{{ module.title }}</p>
<p>{{ module.description }}</p>
<p><a href="{{ module.hrefLink }}"> {{ module.hrefTitle }}</a></p>
</td>
<div ng-if={{$index}}" % 5 === 0">
<tr></tr>
</div>
</div>
</table>
</body>
</html>但问题是<td>元素是由<tr>包装的。这似乎是由ng-repeat生成的。这些td元素是否可以显示在一行，并且每5个元素分隔一次？
Plunkr：http://plnkr.co/edit/MnSD7u1pCKV7kTQkGFPT?p=preview
回答 1
Stack Overflow用户
发布于 2015-04-14 06:22:24
试试这个：http://plnkr.co/edit/D7XyPDM8uJzArqcaWtJf?p=preview
首先，通过使用分块方法(如here所示)将实际的JSON划分为行
function chunk(arr, size) {
var newArr = [];
for (var i=0; i<arr.length; i+=size) {
newArr.push(arr.slice(i, i+size));
}
return newArr;
}
json.modules = chunk(json.modules, 5);然后在HTML中使用两个ng-repeat。一个在TR中用于行，一个在TD中用于行的每个元素：
<table class="table table-bordered">
<tr ng-repeat="(rowIndex, row)in ocw.modules">
<td ng-repeat="module in row | filter:searchText">
<h3 class="moduletitle">{{ module.category }} {{$index+(rowIndex*5)}}</h3>
<p>{{ module.title }}</p>
<p>{{ module.description }}</p>
<p><a href="{{ module.hrefLink }}"> {{ module.hrefTitle }}</a></p>
</td>
</tr>
</table>我已经链接的m59的答案还显示了如何重新连接您的数据，如果您需要使用它"unchucked“。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29615111
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号