AngularJS使用ng-重复和ng-if在每个tr中显示不同数量的td元素。
AngularJS使用ng-重复和ng-if在每个tr中显示不同数量的td元素。
提问于 2014-04-21 21:51:38
我试图在angularjs中创建一个表，该表的每一行td元素的数量是不同的。有时会有跨两列的一个td元素，有时会有两个td元素。
下面的示例代码给出了下表：
身份证.=‘2’>第1项.=‘2’>项
身份证
身份证.=‘2’>第3项.这是第2项！
身份证
但是，我希望这张桌子看起来像这样：
第一项再税
这是第二项！
第3项再税
第4项再税
角码：
<!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？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-04-22 03:44:21
这就是我看到的，当我把你的html粘贴到一个柱塞中时
div标记不允许在tr标记中，而td标记不允许在div标记中。很可能，div标记被完全跳过，然后ng-if与它们一起丢失。
您不需要div标签。只需将ng-if直接放在td标记上：
<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>Stack Overflow用户
发布于 2014-04-21 21:53:57
您的ng-if表达式缺少一个结束单引号。
Stack Overflow用户
发布于 2016-08-20 17:35:43
你需要有ng-如果只在td内
<!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">
<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>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23206641
复制相关文章
相似问题
腾讯云开发者
