Adjust the color scheme of the active button in angularjs to create a fresh new

Question

Adjust the color scheme of the active button in angularjs to create a fresh new

Here is the code snippet I am using to highlight the color of the currently active page button:

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

Take a look at the button image provided here:

https://i.sstatic.net/X2gYO.jpg

I want to customize the color of the active button. Can anyone help me with this?

javascript css angularjs twitter-bootstrap

Answer 1

Answer №1

Using ng-class allows you to assign a specific CSS class based on an expression. In this situation, the active style is applied when it is the current page.

You will need to find the definition of the active style in your CSS files to determine the color associated with it.

Answer 2

Using ng-class allows you to assign a specific CSS class based on an expression. In this situation, the active style is applied when it is the current page.

You will need to find the definition of the active style in your CSS files to determine the color associated with it.

Answer 3

Answer №2

You are encountering a Syntax Error, please refer to the code snippet below for correction:

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

Make sure to also update your CSS with the following:

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

Answer 4

You are encountering a Syntax Error, please refer to the code snippet below for correction:

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

Make sure to also update your CSS with the following:

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

Answer 5

Answer №3

There seems to be a syntax error in your code. Here is a corrected version:

  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 6

There seems to be a syntax error in your code. Here is a corrected version:

  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 7

Answer №4

Make sure to include the active class within single quotes

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 8

Make sure to include the active class within single quotes

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>

Adjust the color scheme of the active button in angularjs to create a fresh new

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to prevent users from being redirected when they press the back button on a webpage

Concealing the nearest object

Repurposing JavaScript objects after clearing their contents

Discovering all input elements by utilizing nextAll in jQuery

Navigating and retrieving information from JSON data

I seem to be having an issue here - my style sheet just won't load

Issues with Semantic UI Calendar not displaying properly

JavaScript AJAX Event Listener

What could be the reason for the full name not being updated in the model when the last name is changed

Implementing a Preloader in a React Web App

What is the best way to retrieve a value from a button function in order to utilize it in AJAX requests and SQL queries?

Is the order of SCSS (SASS) selectors important when dealing with nested classes?

Adding an external JavaScript file to an Angular 5.0.0 project

Tips for identifying changes in APIs during the simulation of end-to-end tests?

Accessing the page directly in a Nuxt SPA is not permitted

A mysterious underscore suddenly materializes within Font Awesome icons when used in HTML

Utilizing the .map() function to display both the property value and property name of a JavaScript object

Modifying the class when ng-focus is triggered in AngularJS

Issue with displaying Wavesurfer.js waveform in custom Shopify section

Instructions for separating a string into smaller parts, further splitting one of the resulting parts along with another associated value, and then combining the leftover segments with the remaining parts