更改活動按鈕的背景顏色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風格

所以，你應該在你的CSS文件中尋找active風格，並檢查那裏相應的顏色。

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 
}