javascript - 使用 ng-repeat 对数组中的 $first 项目进行条件类

Question

我正在构建一个应用程序，它使用 ng-repeat 从数据库中提取并显示时间段列表。我还有一个导航，可以使用 ng-repeat 从同一数据库中提取并显示月/日。当您单击导航中的某一天时，ng-click 将过滤与所选日期匹配的时间列表......这一切都有效。

我的问题是激活第一个导航数组项，以便用户知道他们从哪一天开始 - 下面的屏幕是第一个 View ，尽管下面的时间是针对第一个数组项的；你不会知道，因为它没有类(Class)。我想知道是否有一种方法可以有条件地设置 ng-class="$first ? 'active' : ''" 直到单击另一个链接？显然，仅设置 $first 就可以了，但即使选择另一个日期，它仍然保持事件状态。下面是导航的代码。我在 ui 中使用 Angular-material，在路由器中使用 ui-router。在下图中，您会注意到 JAN FRI 30 是数组中显示的第一个项目。感谢您的帮助。

<ul hide-gt-sm>
        <li ng-repeat="day in times">
          <md-button class="md-primary"
                      ui-sref-active="{{day.date}}"
                      ng-click="filterMobileTimes(day.date.fullDate)"
                      ng-class="$first ? 'active' : ''">
            {{day.date.month}}<br>{{day.date.day}}
          </md-button>
        </li>
      </ul>

Answer 1

实现这一目标的最简单方法是

<ul hide-gt-sm ng-init="activeIndex=0">
    <li ng-repeat="day in times">
      <md-button class="md-primary"
                  ng-click="activeIndex=$index; filterMobileTimes(day.date.fullDate)"
                  ng-class={active:(activeIndex==$index)}>
        {{day.date.month}}<br>{{day.date.day}}
      </md-button>
    </li>
  </ul>

或者不初始化

<ul hide-gt-sm>
    <li ng-repeat="day in times">
      <md-button class="md-primary"
                  ng-click="activeIndex=$index; filterMobileTimes(day.date.fullDate)"
                  ng-class={active:(activeIndex?activeIndex==$index:$first)}>
        {{day.date.month}}<br>{{day.date.day}}
      </md-button>
    </li>
  </ul>