使用 ng-repeat 在数组中的 $first 项上有条件 class

Question

我正在开发一个应用程序，该应用程序使用 ng-repeat 从数据库中提取并显示时隙列表。我还有一个导航，它使用 ng-repeat 从同一个数据库中提取并显示 month/day。当您单击导航中的某一天时，ng-click 将过滤与所选日期相匹配的时间列表……这一切都有效。

我的问题是激活第一个导航数组项，以便用户知道他们从哪一天开始——下面的屏幕是第一个视图，尽管下面的第 th 次是针对第一个数组项；您不会知道，因为它没有 class。我想知道是否有一种方法可以有条件地设置 ng-class="$first ? 'active' : ''" 直到另一个 link 被点击？显然只需设置 $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>

或w/o正在初始化

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

使用 ng-repeat 在数组中的 $first 项上有条件 class

Conditional class on $first item in array using ng-repeat

javascript

arrays

jquery

angularjs

angular-material