完全是Angular的。我需要建立一个显示新闻的表格。每个新闻条目都有一个类别，标题，副标题，简介。每个类别我需要一个col：
美国国际Head1 Head1 Sub1 Sub1 Intro1 Intro1 Head2 Head2 Sub2 Sub2 Intro2 Intro2
每个类别中的项目数始终相同
因此，我得到了一个唯一的类别列表来创建TH，然后针对每个类别中的每个新闻项，显示一个包含3行（标题，副标题，简介）的正文
这是我的Controller JS
window.myApp = this.angular.module('myApp', []);
function NewsController($scope) {
$scope.newsItems = [
{ category: 'US', headline: 'US Headline 1', subhead: 'US Subhead 1', intro: 'US Intro 1' },
{ category: 'US', headline: 'US Headline 2', subhead: 'US Subhead 2', intro: 'US Intro 2' },
{ category: 'International', headline: 'International Headline 1', subhead: 'International Subhead 1', intro: 'International Intro 1' },
{ category: 'International', headline: 'International Headline 2', subhead: 'International Subhead 2', intro: 'International Intro 2' }
];
// distinct list of categories
$scope.categories = $scope.newsItems.reduce(function (sum, item) {
return (sum.indexOf(item.category) == -1 ? sum.concat(item.category) : sum);
}, []);
}
这是HTML
<div ng-app>
<table class="news" ng-controller="NewsController">
<thead>
<tr class="section hidden-xs text-danger">
<!-- Distinct List -->
<th ng-repeat="category in categories" value="{{category}}">{{ category }}</th>
</tr>
</thead>
<tbody ng-repeat="item in newsItems">
<tr>
<td class="">{{ item.headline }}</td>
</tr>
<tr>
<td class="">{{ item.subhead }}</td>
</tr>
<tr>
<td>{{ item.intro }}</td>
</tr>
</tbody>
</table>
这是一个小提琴：http : //jsfiddle.net/mark2457/WMzYX/2/
我开始思考，我会从第1行中的每个获取第一个，然后从第2行中的每个获取第二个，但是意识到我不知道该怎么做。这只是伪数据。最终，它可能来自两个RSS feed。我可以将每个类别放在自己的控制器中，但这似乎有很多重复之处。
（另一方面，我需要有条件地向th和td元素添加类（例如，第二th和td需要一个附加的类，该类表示对于响应式布局而言具有可隐藏性）
理想情况下，我希望整个内容都放在一个单独的文件中，如果可能的话，我可以将其插入到主HTML中
有人可以指出我正确的方向吗？
谢谢
标记
我假设您可以使用html删除table，原因是您实际上是试图显示多个数据列表，这些列表按属性分组。使用table确实很难完成您要问的事情，因为从中tr您不知道应该显示哪个类别，因为tr标题不是child的子元素，所以不能ng-repeat在彼此之间使用2 。
angular.module('news', []);
angular.module('news').controller('NewsController', function($scope) {
$scope.newsItems = [
{ category: 'US', headline: 'US Headline 1', subhead: 'US Subhead 1', intro: 'US Intro 1' },
{ category: 'US', headline: 'US Headline 2', subhead: 'US Subhead 2', intro: 'US Intro 2' },
{ category: 'International', headline: 'International Headline 1', subhead: 'International Subhead 1', intro: 'International Intro 1' },
{ category: 'International', headline: 'International Headline 2', subhead: 'International Subhead 2', intro: 'International Intro 2' }
];
$scope.newsItemsGrouped = {};
$scope.newsItems.forEach(function(item){
$scope.newsItemsGrouped[item.category] = $scope.newsItemsGrouped[item.category] || [];
$scope.newsItemsGrouped[item.category].push(item);
});
});.category-list {
float: left;
border: 1px solid black;
margin: 5px;
padding: 5px;
width: 250px;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="news" ng-controller="NewsController">
<div ng-repeat="(category, items) in newsItemsGrouped" class="category-list">
<h2>{{ category }}</h2>
<div ng-repeat="item in items">
<p>{{ item.headline }}</p>
<p>{{ item.subhead }}</p>
<p>{{ item.intro }}</p>
</div>
</div>
</body>
</html>最值得注意的是，我们现在ng-repeat彼此之间使用了两个，并且newsItemsGrouped是类别到该类别的项目列表的映射。这样，您就可以读出类别和列表，现在我们可以ng-repeat再次找到每个类别的列表，并显示每个项目的属性。
分组的方式是使用普通的JavaScript，使用一些CSS，您将获得示例中提供的布局。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句