Question

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

当day具有message属性时，我不想显示所有<td>列，但相反，我希望显示一行message 1}}。

这是我迄今为止所尝试过的。但似乎忽略了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>，我希望他们只是显示消息＆＃39; Saturday＆＃39 ;和周日＆＃39;

Answer 1

注意，我在这里使用固定数组'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>

Answer 2

您不得将<div>作为<tr>的孩子 - 针对任何HTML规范。

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

Answer 3

要实现您的需求，只需在'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。请查看this answer的后果。

希望有所帮助〜

Answer 4

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

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

这样，如果day.message返回false（null等），它将显示第二个值（day.number）。

另一种选择是：

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

if（day.message）返回true，然后显示'？'之后的内容，如果为false则使用'：'之后的内容

// EDIT

在回复下面的消息时，您只需要将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>

如何打破a来显示基于ng-if的单行？

4 个答案: