使用ng-repeat的数组中$ first项的条件类

Question

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

我的问题是激活了第一个导航阵列项目，因此用户将知道他们从哪一天开始 - 下面的屏幕是第一个视图，尽管下面的第一个数组是第一个数组项目;你不会知道，因为它没有课程。我想知道是否有办法有条件地设置ng-class="$first ? 'active' : ''"，直到点击另一个链接？显然只是设置$ first有效，但即使选择另一个日期也会保持活跃状态​​。以下是导航的代码。我正在为我的路由器使用ui和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>