更改活动按钮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

使用ng-class，您可以根据表达式应用具体的CSS类。在您的情况下，如果它是当前页面，则应用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
}