Question

我正在尝试在angularjs中创建一个表，其中表的每行的td元素数量不同。有时会有一个td元素跨越两列，有时会有两个td元素。

下面的示例代码给出了下表：

ID项目1这是项目2！
ID项目2这是项目2！
ID项目3这是项目2！
ID项目4这是项目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-if不选择每行的一个div？

Answer 1

这是我看到的，当我将你的HTML粘贴到plunker：

时

voodoo mode

div标记内的{p> tr个标记aren't allowed，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>

Answer 2

您的ng-if表达式缺少结束单引号

Answer 3

你需要在td内部使用ng-if

<!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>

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

3 个答案: