Изменение цвета фона активной кнопки angularjs

Question

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

<li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" 
    ng-class="{active :pagination.current == pageNumber, disabled : pageNumber == '...' }"> 
     <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a> 
</li> 

видеть изображение кнопок

Как я могу изменить цвет активной кнопки?

Answer 1

Ваш синтаксис неверен. попробуйте это

ng-class="{'active' :pagination.current == pageNumber}" 

var myApp = angular.module('myApp', []); 
 

 
myApp.controller('MyController', function MyController($scope) { 
 
    
 
    $scope.pagination = { 
 
     current: 2 
 
    }; 
 

 
    $scope.pages = [1,2,3,4,5,6,7]; 
 
    
 
    $scope.setCurrent = function(pageNumber){ 
 
     $scope.pagination.current = pageNumber; 
 
    
 
    } 
 
    
 
});

.active{ 
 
    background-color:green; 
 
    } 
 
li { 
 
    display: inline-block; 
 
} 
 

 
li > a{ 
 
    color: red; 
 
    text-decoration: none; 
 
    padding: 3px 8px; 
 
} 
 

 
li > a:hover{ 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script> 
 

 
<div ng-app="myApp" ng-controller="MyController"> 
 
    <li ng-repeat="pageNumber in pages" ng-class="{'active' :pagination.current == pageNumber }"> 
 
     <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a> 
 
    </li> 
 
</div>

Answer 2

Добавьте active класс в одинарные кавычки

angApp = angular.module('myApp', []); 
 

 
angApp.controller('MyController', function MyController($scope) { 
 
    
 
    $scope.pagination = { current: 2 }; 
 

 
    $scope.pages = [1,2,3,4,5]; 
 
    console.log($scope.pages); 
 
    
 
});

li { 
 
    display: inline-block; 
 
    padding:5px 10px; 
 
    border: 1px solid #ccc; 
 
    margin-right:5px; 
 
    
 
} 
 

 
li>a{ 
 
    color:black; 
 
} 
 

 
.active-button{ 
 
    background-color:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="MyController"> 
 
    <li ng-repeat="pageNumber in pages" ng-class="{'active-button' :pagination.current == pageNumber }" ng-click="pagination.current = pageNumber"> 
 
     <a href="" >{{ pageNumber }}</a> 
 
    </li> 
 
</div>

Answer 3

С нг-класса, ваши применения конкретного CSS CLA ss в соответствии с выражением. В вашем случае, если на текущей странице применяется стиль active

Итак, вы должны искать стиль active в ваших CSS-файлах и проверить соответствующий цвет.

Answer 4

у вас есть ошибка в вашем синтаксисе попробуйте ниже код

<li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" ng-class="{'active' :pagination.current == pageNumber, 'disabled' : pageNumber == '...' }"> 
    <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a> 
</li> 

и в вашем CSS

.active{ 
    background-color:#000; // Enter your color Code or name 
}