Условный класс в $ first item в массиве с использованием ng-repeat

Я создаю приложение, которое тянет и отображает список временных интервалов из базы данных с помощью ng-repeat. У меня также есть навигация, которая тянет и отображает месяц/день из одной базы данных с помощью ng-repeat. Когда вы нажмете на один из дней навигация, ng-click будет фильтровать список раз, соответствующий выбранному дню ... все это работает.

В моей задаче активируется первый элемент массива nav, поэтому пользователь будет знать, в какой день они начинаются - нижеприведенный экран является первым представлением и хотя th раз ниже для первого элемента массива; вы бы не знали, потому что у них нет класса. Мне было интересно, есть ли способ условно установить 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>

enter image description here

источник

2015-01-29 Studio Rooster

почему бы вам не сделать текущий день активное состояние и позволить ui-sref-active обрабатывать остальные? –

Можете ли вы привести мне пример ... Я все еще борюсь за свои умственные способности. Спасибо. –

nm Я смешался с использованием ui-sref-active. Я предположил, что подключен ui-sref, вы можете сделать что-то вроде ng-class = {active: (activeIndex == $ index)}, а затем, когда вы нажимаете вариант, который вы делаете ng-click = "activeIndex = $ index; ...." –

из простейших способов достижения этой цели являются

<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-30 00:58:39

Условный класс в $ first item в массиве с использованием ng-repeat

ответ

Смежные вопросы