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

Question

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

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. Мне интересно, как это можно сделать с помощью angular, добавляя или удаляя классы во время выполнения с помощью событий нажатия. Я имитирую, как отображается область подкачки результатов поиска Google.

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

angularjs

1

user3610227 3 Фев 2015 в 00:03

Answer 1

Добавьте ng-class в вашу разметку

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

В следующей функции в верхней части функции добавьте

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

1

yangli1990 2 Фев 2015 в 21:53

Answer 2

Если вы храните переменную currentPage в своем $scope, а $scope.currentPage надежно обновляется в вашей функции $scope.next(), вы можете добавить {{X4} } в вашем диапазоне:

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

1

Brian Law 2 Фев 2015 в 21:53

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

2 ответа

Похожие вопросы

Новые вопросы

angularjs