AngularJS使用ng-repeat和ng在每个tr中显示不同数量的td元素if if

我想在表格中每行的td元素数量变化的angularjs中创建一个表。有时会有一个跨越两列的td元素，有时会有两个td元素。AngularJS使用ng-repeat和ng在每个tr中显示不同数量的td元素if if

下面的示例代码如下表给我：

ID 项目1 这是项目2！
ID 这是条款2！
ID 项目3 这是项目2！
ID 项目4 0123这是项目2！

但是，我想表看起来像这样：

ID 项目1
这是项目2！
ID 项目3
ID 项目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之一的每一行？

来源

2014-04-21 KennyE

这是我所看到的，当我粘贴到您的html为plunker：

voodoo mode

div标签aren't allowed内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>

来源

2014-04-22 03:44:21

您的NG-如果表达式缺少一个右单引号

来源

2014-04-21 21:53:57

我已经更新了NG-如果表达式包括关闭单引号，但问题没有解决。 – KennyE

你需要有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>

来源

2016-08-20 17:35:43 shubh

AngularJS使用ng-repeat和ng在每个tr中显示不同数量的td元素if if

回答

相关问题