Javascript 如何打破a<；trng repeat>；是否基于ng if显示单行？

我正在我的

ng repeat

上迭代

$scope.days

对象数组。大多数对象没有

消息

属性

当

日

具有

消息

属性时，我不想显示所有

列，而是想显示带有该

消息的单行

这就是我到目前为止所尝试的。但是如果忽略了

，则似乎是

ng

  <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
示例中，我不希望第5天和第6天有9个
，我只希望它们显示消息“星期六”和“星期日”。
您不能将
作为
的子代-这违反了任何HTML规范

唯一合理的做法是将
-单个单元格放在所有列上。
您不能将
放在
的子单元格中-这违反了任何HTML规范

唯一合理的做法是将
放在一个单元格中，该单元格将跨越所有列。
要实现所需功能，只需在“message”属性上使用ng即可：

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


{{day.number}
{{day.message}

正如@c-smile提到的，不要将div添加到表中。
看看后果如何

希望它能帮助~
实现您所需的功能，只需在“message”属性上使用ng：

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


{{day.number}
{{day.message}

正如@c-smile提到的，不要将div添加到表中。
看看后果如何

希望对您有所帮助~
另一种方法是使用以下内容：

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

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

//编辑

作为对下面消息的回应，您只需将div更改为td即可：）


{{day.number}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
另一种方法是使用如下内容：

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

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

//编辑

作为对下面消息的回应，您只需将div更改为td即可：）


{{day.number}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
{{day.message}
注意，我在这里使用的是固定数组“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>


{{day.number}
{{day.message}
注意，我在这里使用的是固定数组“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>


{{day.number}
{{day.message}
使用数据ng show=“”代替ng if，可能有帮助使用数据ng show=“”代替ng if，可能有帮助。它使用ng if for every有效。有没有一种干燥的方法可以做到这一点？每个td？根据我的观察，你的day对象中只有2个属性，对吗？是的，但我有10个属性。应该始终显示第一个。如果有消息，则应显示colspan=9的td。如果没有，9个不同的td应该出现。我明白你的意思@Jas的回答有道理。我就是不明白为什么你需要ng if='中的{{day.message}}}！day.message“街区。它永远没有价值。让它空着会更干净吗？没错。它在那里调试。：）谢谢它使用ng if for every有效。有没有一种干燥的方法可以做到这一点？每个td？根据我的观察，你的day对象中只有2个属性，对吗？是的，但我有10个属性。应该始终显示第一个。如果有消息，则应显示colspan=9的td。如果没有，9个不同的td应该出现。我明白你的意思@Jas的回答有道理。我就是不明白为什么你需要ng if='中的{{day.message}}}！day.message“街区。它永远没有价值。让它空着会更干净吗？没错。它在那里调试。：）谢谢它使用ng if for every有效。有没有一种干燥的方法可以做到这一点？我不会用ng repeat来做，因为这正是这种情况下，当它对你没有好处的时候。我认为手动填充该表的innerHtml将是最有效的方法。谢谢。它使用ng if for every有效。有没有一种干燥的方法可以做到这一点？我不会用ng repeat来做，因为这正是这种情况下，当它对你没有好处的时候。手动填充该表的innerHtml将是我认为最有效的方法。我喜欢第二次ng重复，所以我不需要在每个td中重复我自己。回答得好。谢谢。同样在td ng重复中，当我们已经知道时，{{day.message}的打印是无用的！day.message，所以您可以在空的td单元中放置不间断的空格。这只是为了调试，哈哈。再次感谢。我会删除它。我喜欢第二次ng重复，所以我不需要在每一次td中重复我自己。回答得好。谢谢。同样在td ng重复中，当我们已经知道时，{{day.message}的打印是无用的！day.message，所以您可以在空的td单元中放置不间断的空格。这只是为了调试，哈哈。再次感谢。我会移除它。Matt，day.number应该始终显示。对不起，我本可以解释得更好。编辑以反映此情况。应始终显示Matt，day.number。对不起，我本可以解释得更好。编辑以反映这一点