How can I use Angular to remove the "selected" class from one li element and then add it to a different li element?

Question

How can I use Angular to remove the "selected" class from one li element and then add it to a different li element?

I am trying to achieve a specific functionality in the code below (click Demo link). How can I remove the "selected" class from the "Zero" li item and then add it to the "Two" li item? Essentially, what I want is to deselect the current li item and select a new one.

In the Demo code, it seems that the removeClass() function affects the newly selected li as well, resulting in none of the li elements having the "selected" class. If you comment out line 11 in the JavaScript code, both "Zero" and "Two" will have the "selected" class. However, the desired outcome is for only "Two" to have the "selected" class.

Any suggestions or recommendations on how to achieve this would be greatly appreciated.

Demo

javascript angularjs

Answer 1

Answer №1

Check out this revised version. It's important to reconsider your approach when working with an angular app. Your controller shouldn't handle jquery manipulation like it currently does. Take a look at my example and observe how the DOM state is determined by the scope data state. There's no need to manually track classes applied to elements or understand the template's inner workings.

Another technique for handling selection logic is to introduce a separate scope variable, $scope.selected. This allows you to eliminate the select() scope function and simply implement the following in your template:

<li ng-repeat="item in items"
    ng-class="{selected: item == selected}"
    ng=click="selected = item">
    {{item.text}}
</li>

Answer 2

Check out this revised version. It's important to reconsider your approach when working with an angular app. Your controller shouldn't handle jquery manipulation like it currently does. Take a look at my example and observe how the DOM state is determined by the scope data state. There's no need to manually track classes applied to elements or understand the template's inner workings.

Another technique for handling selection logic is to introduce a separate scope variable, $scope.selected. This allows you to eliminate the select() scope function and simply implement the following in your template:

<li ng-repeat="item in items"
    ng-class="{selected: item == selected}"
    ng=click="selected = item">
    {{item.text}}
</li>

How can I use Angular to remove the "selected" class from one li element and then add it to a different li element?

Answer №1

Similar questions

What steps should I take to adjust the alignment of the arrows that should be beside the links in my footer?

Underlining.js - Evaluating differences between two arrays containing objects

Is there a way to optimize my code to ensure that the CSV export only occurs after all AJAX queries have been completed?

The toISOString() method is deducting a day from the specified value

Utilizing JQuery for parsing information

Ionic - encountering crashes with ion-nav-view on emulator

Provide a response containing JSON data extracted from an HTML file

Modify the flashVars in flowplayer using swfObject to switch videos

Exploring Angular 4: Embracing the Power of Observables

Retrieve / - - - - ms within meanio

How to reference an object from an external file in TypeScript using Ionic 2 and Angular 2

What are the best methods for looping through ids in MongoDB and executing actions on them?

Is there DnD support in Chrome?

"Exploring three.js: How to locate the closest point on a Mesh to the position of

Difficulty encountered when using `require('bignumber.js')` in Truffle test, despite successful installation as shown by `npm ls -g` (Windows)

Utilizing asynchronous calls within a forEach loop for executing Firebase operations

Is there a way to position a slide container so that it is initially 10% from the left margin, and then shifts to be 10% from the right margin when it reaches the end? (Using vue-awesome

What makes Safari for Windows stand out when it comes to AJAX?

When utilizing Simple Git in Node.js, conducting a Git diff on a specified file will result in the retrieval of the

Disabling the movement of arrows in the client-testimonials-carousel plugin