0

我正在构建一个应用程序，它使用 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>

在此处输入图像描述

4

1 回答 1

3

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

<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>
于 2015-01-30T00:58:39.840 回答