Question

我正在努力实现这样的目标：

<th>23/03 lundi</th>
<th>24/03 mardi</th>
<th>25/03 mercredi</th>
<th>26/03 jeudi</th>
<th>27/03 vendredi</th>

<th class="info"></th>

<th>30/03 lundi</th>
<th>31/03 mardi</th>
<th>01/04 mercredi</th>
<th>02/04 jeudi</th>
<th>03/04 vendredi</th>

<th class="info"></th>

<th>06/04 lundi</th>
<th>07/04 mardi</th>
<th>08/04 mercredi</th>
<th>09/04 jeudi</th>
<th>10/04 vendredi</th>

<th class="info"></th>

<th>13/04 lundi</th>
<th>14/04 mardi</th>
<th>15/04 mercredi</th>
<th>16/04 jeudi</th>
<th>17/04 vendredi</th>

（注意每周末的<th>）

我已经阅读了关于ng-if和ng-hide / ng-show哪些可以帮助那些但我无法让它工作。

我在这里使用这个片段：

<th ng-repeat="date in headers">
    {{date.date}} {{date.dayName}}
</th>
<th ng-show="date.dayName == 'vendredi'" class="info"></th>

这个显然不起作用，因为第二个<th>不在ng-repeat的范围内，但我看不出如何实现这一目标。

我也尝试了其他的东西，但它不起作用，我理解，因为我仍然需要打印第一个<span>，即使它是星期五。另外，正如您所看到的，我不知道这不仅仅是<th>的内容，而是class的内容。

<th ng-repeat="date in headers" class="active">
    <span ng-if="date.dayName != 'vendredi'">
        {{date.date}} {{date.dayName}}
    </span>
    <span ng-if="date.dayName == 'vendredi'">
        <th class="info"></th>
    </span>
</th>

嗯，有人可以帮忙吗？我在这里认真对待想法。

Answer 1

默认的ng-repeat格式似乎不能直接支持你想要的东西，但我们可以稍微调整一下，如这个plunker所示：

http://plnkr.co/edit/ZVIWdzNlzQnVzsEHa7TK?p=preview

主要思想是在控制器中，我们引入一些范围变量以在html中使用：

$scope.list = [1,2,3,4,5,6,7,8,9,10,11]; // demo data, similar to your    headers
$scope.parseInt = parseInt;
var length = $scope.list.length + parseInt($scope.list.length/5);
$scope.range = new Array(length);

然后是html部分：

  <tr>
  <th ng-repeat="n in range track by $index">
    <span style="color:black;" ng-switch on="$index%6">
      <span ng-switch-when="5">
        info
      </span>
    <span ng-switch-default>
      {{list[$index-parseInt($index/6)]}}
     </span>
   </span>
  </th>
  </tr>

如何在ng-if（或ng-hide / ng-show）上使用ng-repeat？

1 个答案: