результаты поискового вызова с отслеживанием текущей страницы

58
7

Я показываю результаты поиска с разбивкой по страницам в следующем формате.

1 2 3 4 5 6 7 8 9 10

с помощью

<ul>
<li ng-repeat="page in pages">
<span ng-click="next($index)">{{$index + 1}}</span>
</li>
</ul>

Я должен сделать currentPage невидимым визуально с помощью CSS, интересно, как это можно сделать с помощью углового путем добавления или удаления классов во время выполнения с использованием событий click. Я имитирую, как отображается область подкачки результатов поиска Google.

.link {
text-decoration: underline;
}
.no-link {
text-decoration: none;
}

спросил(а) 2015-02-03T00:03:00+03:00 5 лет, 8 месяцев назад
1
Решение
57

добавьте ng-класс в свою разметку

<ul>
<li ng-repeat="page in pages">
<span ng-class="{'link':currentPage !== $index, 'no-link': currentPage === $index}" ng-click="next($index)">{{$index + 1}}</span>
</li>
</ul>

в следующей функции в верхней части функции add

if ($scope.currentPage === index) return false;

ответил(а) 2015-02-03T00:53:00+03:00 5 лет, 8 месяцев назад
58

Если вы сохраняя currentPage переменного на вашем $scope и $scope.currentPage в настоящее время надежно обновляются в вашем $scope.next() функция, что вы можете сделать, это добавить ng-class директивы на вашем пролете:

<span ng-click="next($index)" ng-class="{ 'link': currentPage !== $index, 'no-link': currentPage === $index }">{{$index + 1}}</span>

Эффективно, что мы делаем, мы передаем ng-class объектной карте карты формы map['cssClass'] =/* some angular expression */ Если угловое выражение, соответствующее классу CSS, является правдивым, то класс будет добавлен в элемент HTML, иначе он будет опущен.

Таким образом, в вашем примере класс 'link' будет добавлен только к диапазону, если $index страницы не является той страницей, которую мы просматриваем в данный момент (то есть это не $scope.currentPage).

ответил(а) 2015-02-03T00:53:00+03:00 5 лет, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема