如何打破 <tr ng-repeat> 以显示基于 ng-if 的单行？

Question

我正在 ng-repeat 上迭代 $scope.days 对象数组 。大多数对象没有 message 属性。

当 day 具有 message 属性时，我不想显示所有 <td> 列，而是想显示带有 message.

这是我目前为止尝试过的方法。但似乎 ng-if 被忽略了。

  <tr ng-repeat='day in days'>
      <td> {{day.number}} </td>
      <div ng-if='!day.message'>
          <td> {{day.message}}</td>
          <td> {{day.message}}</td>
          <td> {{day.message}}</td>
          <td> {{day.message}}</td>
          <td> {{day.message}}</td>
          <td> {{day.message}}</td>
          <td> {{day.message}}</td>
          <td> {{day.message}}</td>
          <td> {{day.message}}</td>
      </div>

      <div ng-if='day.message'>
          {{day.message}}
      </div>
  </tr>

这是一个$scope.days例子：

$scope.days = [
  {number: 4},
  {number: 5, message: 'Saturday'},
  {number: 6, message: 'Sunday'},
  {number: 7}
];

在上面的 $scope.days 示例中，我不希望第 5 天和第 6 天有 9 <td>，我希望它们只显示消息 'Saturday' 和 'Sunday'.

Answer 1

您不得将 <div> 作为 <tr> 的子级 - 这违反任何 HTML 规范。

唯一合理的做法是放置 <td colspan=10> - 将跨越所有列的单个单元格。

Answer 2

要实现您的需要，只需在 'message' 属性:

上使用 ng-if

<tr ng-repeat='day in days'>
    <!--display number if no message-->
    <td ng-if="!day.message"> {{day.number}}</td>
    <!--add the td for message if it exists-->
    <td ng-if='day.message'>{{day.message}}</td>
</tr>

如@c-smile 所述，请勿将 div 添加到您的 table 中。查看 this answer 的结果。

希望对你有帮助~

Answer 3

另一种方法是使用这样的东西：

<td> {{ day.message || day.number }}</td>

有了这个，如果day.message returns false（空等），它将显示第二个值（day.number）。

另一种选择是：

{{ (day.message) ? day.message : day.number }}

如果 (day.message) returns 为真，则显示 '?' 后的内容，如果为假，则使用 ':' 后的内容

//编辑

为了回复您下面的消息，您只需将 div 更改为 td 然后 :)

 <tr ng-repeat='day in days'>
      <td> {{day.number}} </td>
      <td ng-if='!day.message'>
          <div> {{day.message}}</div>
          <div> {{day.message}}</div>
          <div> {{day.message}}</div>
          <div> {{day.message}}</div>
          <div> {{day.message}}</div>
          <div> {{day.message}}</div>
          <div> {{day.message}}</div>
          <div> {{day.message}}</div>
          <div> {{day.message}}</div>
      </td>

      <td ng-if='day.message'>
          {{day.message}}
      </td>
  </tr>

Answer 4

注意，我在这里使用的是固定数组“9”，但这也可以作为 $scope 基本数组限制...

<table border="1" width="100%">
 <tr ng-repeat='day in days'>
   <td>{{day.number}}</td>

   <td ng-if="!day.message" ng-repeat="x in [1,2,3,4,5,6,7,8,9]">&nbsp;</td>

   <td ng-if="day.message" colspan="9"> {{day.message}} </td>
  </tr>
</table>

如何打破 <tr ng-repeat> 以显示基于 ng-if 的单行？

How to break a <tr ng-repeat> to display a single line based on ng-if?

html

javascript

angularjs

ng-repeat