AngularJS provides a way to create isolated scope for individual items within a list

Question

AngularJS provides a way to create isolated scope for individual items within a list

I am using ng-repeat to populate a list of items.

<ul>
    <li ng-repeat="item in items" ng-class="setClass" ng-click="assignClass()">{{item.name}}</li>
</ul>

In my controller, I have the following code:

$scope.assignClass = function(){
    $scope.setClass = "sampleClass";
}

The issue I'm facing is that when I click on any item, all items get the 'sampleClass' added.

My desired scenario is that when I click on the first item, only that item should have the 'sampleClass'. When I click on the second item, both the first and second items should have the 'sampleClass'.

How can I achieve this behavior?

javascript angularjs angularjs-scope

Answer 1

Answer №1

The previous code you were using applied the styling to all list items. I have made a modification to the code so that each individual item in the unordered list can have its own class. You can now use the assignClass function with the selected item as a parameter to apply the desired class to that specific item.

<ul>
    <li ng-repeat="item in items" ng-class="item.setClass" ng-click="assignClass(item)">
        {{item.name}}
    </li>
</ul> 

$scope.assignClass = function(selectedItem){
    selectedItem.setClass = "sampleClass";
}

Answer 2

The previous code you were using applied the styling to all list items. I have made a modification to the code so that each individual item in the unordered list can have its own class. You can now use the assignClass function with the selected item as a parameter to apply the desired class to that specific item.

<ul>
    <li ng-repeat="item in items" ng-class="item.setClass" ng-click="assignClass(item)">
        {{item.name}}
    </li>
</ul> 

$scope.assignClass = function(selectedItem){
    selectedItem.setClass = "sampleClass";
}

Answer 3

Answer №2

Invoke the assignClass function with the provided item.

<ul>
    <li ng-repeat="item in items" ng-click="assignClass(item)">{{item.name}}</li>
</ul>

Subsequently adjust the class of that particular item.

$scope.assignClass = function(item){
    $(item).toggleClass("newSampleClass");
}

Answer 4

Invoke the assignClass function with the provided item.

<ul>
    <li ng-repeat="item in items" ng-click="assignClass(item)">{{item.name}}</li>
</ul>

Subsequently adjust the class of that particular item.

$scope.assignClass = function(item){
    $(item).toggleClass("newSampleClass");
}

AngularJS provides a way to create isolated scope for individual items within a list

Answer №1

Answer №2

Similar questions

Creating an effect where an image gradually enlarges from its midpoint

Encountered a 404 error while utilizing the Java - Angular web service

What is the best way to ensure that Jest waits for an event to occur before performing an assertion?

What is the method for altering the track color on a range slider?

Activate Bootstrap 4 dropdown on mobile devices/responsive design

Transmitting user input to server using AngularJS

Only execute the NPM script if there is a staged JavaScript file

AngularJS app enhanced with personalized directive for drag and drop functionality

Interpreting binary decimal data using JavaScript

To reveal the secret map location, just tap on the button - but remember, this only applies to

Execute the script when the document is fully loaded

Encountering typeahead provider issues when attempting to upgrade UI Bootstrap version from 0.12 to 0.13

Where is the best place to use preventDefault in code?

Unveiling and Shifting Among Concealed HTML Forms

Issue with bootstrap tooltip visibility within a specific div container

Creating a variety of NextJS components

Why do two date type variables have identical content?

Create a function to produce a list of dates within two specified date ranges using JavaScript

Concluding the dialogue once the post request has been successfully processed

An uncaught error has arisen within Electron-forge: [object Object]