AngularJS显示TR采用NG-重复和NG-如有不同数量的每个TD elems的 [英] AngularJS displaying different number of td elems in each tr using ng-repeat and ng-if
问题描述
我想在那里angularjs TD元素的每个表的行数变化来创建一个表。有时会为一个TD元素跨越两列，有时会有两个TD元素。
I am trying to create a table in angularjs where the number of td elements per row of the table varies. Sometimes there will be one td element spanning two columns and sometimes there will be two td elements.
这个例子code以下是给我下表：
The example code below is giving me the following table:
＆ID NBSP;＆NBSP;＆NBSP;＆NBSP;项目1＆NBSP;＆NBSP;＆NBSP;这是第2项结果！
ID＆NBSP;＆NBSP;＆NBSP;＆NBSP;项目2＆NBSP;＆NBSP;＆NBSP;这是第2项结果！
ID＆NBSP;＆NBSP;＆NBSP;＆NBSP;第3项＆NBSP;＆NBSP;＆NBSP;这是第2项结果！
ID＆NBSP;＆NBSP;＆NBSP;＆NBSP;第4项＆NBSP;＆NBSP;＆NBSP;！这是第2项结果
ID Item 1 This is Item 2!
ID Item 2 This is Item 2!
ID Item 3 This is Item 2!
ID Item 4 This is Item 2!
不过，我想表看起来像这样：
However, I want the table to look like this:
＆ID NBSP;＆NBSP;＆NBSP;＆NBSP;第1项结果
这是项目2！结果
ID＆NBSP;＆NBSP;＆NBSP;＆NBSP;第3项结果
ID＆NBSP;＆NBSP;＆NBSP;＆NBSP;第4项结果
ID Item 1
This is Item 2!
ID Item 3
ID Item 4
角code：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link href="bootstrap.css" rel="stylesheet" />
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("TabCtrl", function($scope) {
$scope.items = ["Item 1", "Item 2", "Item 3", "Item 4"]
});
</script>
</head>
<body>
<div ng-controller="TabCtrl">
<table class="table">
<tr ng-repeat="item in items">
<div ng-if="item != 'Item 2'">
<td>ID</td><td>{{item}}</td>
</div>
<div ng-if="item == 'Item 2'">
<td colspan="2">This is Item 2!</td>
</div>
</tr>
</table>
</div>
</body>
</html>
为什么NG - 如果不是唯一的选择的div之一的每一行？
Why is the ng-if not selecting only one of the divs for each row?
推荐答案
这是我所看到的，当我粘贴到您的html成的 plunker ：
This is what I saw, when I pasted your html into a plunker:
DIV 标签 TR 标记中是不允许和 D 标签是不允许在 DIV 标记。也许， DIV 标记得到完全跳过，然后在 NG-如果，则与他们丢失。
div tags aren't allowed inside tr tags, and td tags are not allowed inside div tags. Probably, the div tags are getting skipped completely, and then the ng-ifs are lost with them.
您不需要 DIV 标记。只要把 NG-如果取值直接在 D 标签：
You don't need the div tags. Just put the ng-ifs directly on the td tags:
<table class="table">
<tr ng-repeat="item in items">
<td ng-if="item != 'Item 2'">ID</td>
<td ng-if="item != 'Item 2'">{{item}}</td>
<td ng-if="item == 'Item 2'" colspan="2">This is Item 2!</td>
</tr>
</table>
这篇关于AngularJS显示TR采用NG-重复和NG-如有不同数量的每个TD elems的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
