Apply dynamic CSS class to list items in AngularJS

Within my code, there are two list options available: Monthly and Quarterly. I currently have a class called "active" that is used to highlight elements.

I am seeking a solution in Angular that will apply the class "active" to one of the options when it is clicked or selected. At the moment, the class=active is only applied manually to Monthly. I would like to automate this process through Angular.

<div class="list">
           <p class="subheader secondary">Select Preferred View</p>
           <ul class="tabs">
           <li><a href="#monthly" ng-click="type='month'" data-ajax="false" **class=active**>Monthly</a></li>
           <li><a href="#quarterly" ng-click="type='quarter'" data-ajax="false">Quarterly</a></li>
   </ul>
  </div>
angularjscssangularjs-directive

Answer №1

To implement the ng-class directive, refer to the code snippet below:

<div class="list">
           <p class="subheader secondary">Select Preferred View</p>
           <ul class="tabs">
           <li><a href="#monthly" ng-click="type='month'" ng-class="{'active' : type=='month'}" data-ajax="false" **class=active**>Monthly</a></li>
           <li><a href="#quarterly" ng-click="type='quarter'" ng-class="{'active' : type=='quarter'}" data-ajax="false">Quarterly</a></li>
   </ul>
  </div>

This directive applies a specified class when the given expression evaluates to true and removes it when it evaluates to false.

ng-class="{'classname' : expression}"

You can set a default value in a controller:

$scope.type = 'month';

or use ng-init directive on the div element:

<div class="list" ng-init="type='month'">

View an example on jsFiddle.

For another example with default setting using ng-init, visit this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show different text or letter when hovering

Is there a way to hide one letter and display another in a link, with a different style on hover? For example: This is a... ...regular link. And this is a... ...hovered link. Any ideas on how to make this happen? Thank you. Edit: Just to clarify — ...

jquerycsseffect

Install Yeoman's Angular generator without using sudo with npm

Attempting to install generator-angularjs with Yo (Yeoman) without sudo: npm install -g generator-angular An error occurred: Error: EACCES, mkdir '/usr/lib/node_modules/generator-angular' Despite attempting sudo yo, it is recommended not to u ...

angularjsnpmsudoyeoman

Creating a simple bootstrap code for developing plugins in Wordpress

After successfully coding in Brackets with the Theseus plugin on my local machine, I encountered a problem when attempting to transfer my code to a Wordpress installation. The transition from Brackets to Wordpress seems far more complicated than expected. ...

javascriptphpcsswordpressplugins

Having issues showcasing the array of objects stored in $scope in AngularJs

I'm encountering an issue where I can't seem to display the values of my scope variables. Even though I'm new to Angular, I've successfully done this many times before. Here are the key parts of my index.html file. The div-ui element is ...

javascripthtmlangularjsnode.js

Eliminating documents subsequent to file upload

I need to send in my application and upload the necessary file for the submission. However, I can only upload the files after the application is successfully submitted. To achieve this, I have included the upload function within the success callback of the ...

angularjscordova

A <div> with relative positioning is inhibiting the visibility of absolutely positioned elements without any visible overlap

Recently, I encountered a strange issue on my webpage: Image of page The lines on the left side are supposed to be displayed behind or on top of the text box. However, when I increase their z-index, the lines extend all the way to the top of the page and g ...

javascripthtmlcss

Safari's mysterious vanishing act: Elements go missing in Vue.js

Has anyone encountered this issue before? I am using a vue 2 template with vuetify 2 for rendering, and I have noticed that in Safari only, the buttons on the page flash upon loading and then disappear. Upon inspecting the DOM, I can still see the button ...

javascriptcssvue.jsvuetify.js

The Magic of Jasmine's toMatch Method and the Power of Parentheses

Have you observed that when using Jasmine Expect with toMatch, it fails if the string being matched contains a (? If so, what steps did you take to address this issue? For example: This statement fails or returns "False" instead of "True": expect("test ...

regexangularjsunit-testingjasmineprotractor

Why is AngularJS not sending a PUT request when updating with $resource?

Utilizing the $resource service for CRUD operations on a REST API. If customer.id is not set, it signifies a new record and is sent via the Post Method: POST /info.json That's expected behavior, but what happens when customer.id is already set? PO ...

restangularjs

Is there a way to implement row striping for unordered lists using anchors in HTML?

I'm currently working on creating a layout with draggable rows. When trying to style the table (located on the right and bordered in green), everything looks great. However, once I add anchor tags to transform these into large draggable cells that wi ...

htmlcsshtml-lists

Tips for integrating a unique font into your PhoneGap project

I've been attempting to incorporate a custom font into my PhoneGap application, trying out two different methods I came across online. Unfortunately, neither of them seem to be effective when using PhoneGap 3 and Xcode 5. First method involves using ...

htmlcssxcodecordova

Carousel malfunctioning, refusing to slide smoothly

I recently copied the bootstrap 5 Carousel code and tweaked it with some additions, however, it's not functioning correctly. It seems to only go to the 2nd slide and then stops. Strangely enough, when I open the developer tools (F12) and go to inspect ...

javascripthtmlcsscarouselbootstrap-5

A fixed header list using CSS with a single scroll bar

I am looking to create a scrollable list with a fixed header, where the scroll bar extends the full height of the parent but only scrolls through the nav items (keeping the logo in place). My current setup involves: <div className="home-page-nav"> ...

csscss-grid

ng-click - triggers a function and then redirects to another page

I'm facing a small issue. I am trying to set up an ng-click event that redirects, but before the redirect happens, I need to send some data through post request. Here is my HTML code : <a href="/test" ng-click="updateData($event)">Go</a> ...

javascriptangularjshttp-redirect

Retrieve the radio button value without using a key when submitting a form in JSON

Looking to extract the value upon form submission in Angular, here is the code: In my Typescript: constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public formBuilder: FormBuilder, public alertCtrl ...

javascriptangularjsjsonformstypescript

How to properly adjust HTTP headers within an AngularJS factory

Looking for guidance from an Angular expert. I want to know how to modify the header for POST in the code snippet below: 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'? The provided code is as follows: var tableMod ...

javascriptangularjsfactory

repeating the identical content in the same setting

I am encountering an issue with jquery as I have 2 different sets of icons, each of which I want to do the same thing: My primary codes are <ul> <li> <a href=""> <i class="fa fa-facebook"></i> ...

javascriptjqueryhtmlcss

Update the collapse panel content using ng-repeat

Managing a list of projects with multiple tasks can be quite challenging. One approach is to utilize a collapse panel where each project serves as the title, and the tasks are displayed within the content section. However, one common issue faced in this se ...

angularjs

Ways to create gaps among the links in the Bootstrap 4 navigation bar?

I recently put together a Bootstrap 4 navbar and now I'm looking to increase the spacing between the items on the right side of the navbar. <nav id="menu" class="navbar navbar-expand-md sticky-top"> <div class="site-branding navbar-brand c ...

htmlcssbootstrap-4

"ReactPaginate's Dual Paginator feature for both Top and Bottom navigation

Dealing with Pagination: const CarsSection = () => { const itemsPerPage = 8; const [itemOffset, setItemOffset] = useState(0); const endOffset = itemOffset + itemsPerPage; const currentItems = carsData.slice(itemOffset, endOffset); const pageCo ...

javascripthtmlcssreactjsreact-paginate