The ng-class directive isn't functioning as anticipated when paired with ng-repeat

Question

The ng-class directive isn't functioning as anticipated when paired with ng-repeat

Here is the HTML code I have:

<div ng-click="changeBorder(value)" ng-class="{active_borders:isActive(value)}" ng-repeat="value in values">
            <img class="card-img-bottom" src="{{value.Imagen}}" />
        </div>

This is my Javascript code:

$scope.isActive = function isActive(value){return $scope.valueSelected.Id==value.Id;}

$scope.changeValue=function changeValue(value){$scope.valueSelected=value;}

EXPLANATION: I am trying to achieve a functionality where clicking on a div, containing an image, will change the border color of that specific div. Only the last clicked div should have its border colored.

MY PROBLEM: The issue I am facing is that the isActive() function is being executed twice instead of once during the ng-repeat cycle as intended.

I want to avoid this double execution because the function involves database communication, and it could cause complications if it runs constantly.

javascript angularjs

Answer 1

Answer №1

One possible explanation for the double evaluation of isActive is that Angular evaluates all bindings on a page during the digest cycle to ensure synchronization with model data. This behavior is typical in AngularJS applications and does not significantly impact performance, especially when it involves an equality check like

$scope.valueSelected.Id==value.Id;

.

The frequency of execution for the isActive function can vary depending on the application's requirements.

If you have concerns about the function running multiple times due to additional tasks such as database communication, it is best to avoid including API calls or network operations within binding functions. This can lead to continuous executions and instability in the digest cycle.

It is recommended to handle database calls within a separate method like $scope.changeValue which should only be triggered by user actions. This approach aligns with good architectural practices and ensures that the application functions as intended.

Answer 2

One possible explanation for the double evaluation of isActive is that Angular evaluates all bindings on a page during the digest cycle to ensure synchronization with model data. This behavior is typical in AngularJS applications and does not significantly impact performance, especially when it involves an equality check like

$scope.valueSelected.Id==value.Id;

.

The frequency of execution for the isActive function can vary depending on the application's requirements.

If you have concerns about the function running multiple times due to additional tasks such as database communication, it is best to avoid including API calls or network operations within binding functions. This can lead to continuous executions and instability in the digest cycle.

It is recommended to handle database calls within a separate method like $scope.changeValue which should only be triggered by user actions. This approach aligns with good architectural practices and ensures that the application functions as intended.

Answer 3

Answer №2

Angular reiterates functions within scope multiple times to accommodate dependencies that may have a ripple effect on other variables. If this repetitive behavior becomes problematic, it might be time to explore alternative strategies since halting the process is not an option. The task of IsActive should be singular: confirming whether an object is active without initiating API requests. Take a step back and revisit your controller's design to minimize redundant calls.

UPDATE: To clarify, there are instances where you can prevent duplicate calls. However, relying solely on one call is risky, and incorporating API requests in what essentially should act as a "GET (a read method)" is not the recommended approach.

Answer 4

Angular reiterates functions within scope multiple times to accommodate dependencies that may have a ripple effect on other variables. If this repetitive behavior becomes problematic, it might be time to explore alternative strategies since halting the process is not an option. The task of IsActive should be singular: confirming whether an object is active without initiating API requests. Take a step back and revisit your controller's design to minimize redundant calls.

UPDATE: To clarify, there are instances where you can prevent duplicate calls. However, relying solely on one call is risky, and incorporating API requests in what essentially should act as a "GET (a read method)" is not the recommended approach.

Answer 5

Answer №3

Give this a shot! Just remember to set the default value of $scope.valueSelected = {} unless you want it to throw an error saying it can't read property id of undefined.

<div ng-click="changeBorder(value)" ng-class="{'active_borders':valueSelected.Id==value.Id}" ng-repeat="value in values">
    <img class="card-img-bottom" src="{{value.Imagen}}" />
</div>

Answer 6

Give this a shot! Just remember to set the default value of $scope.valueSelected = {} unless you want it to throw an error saying it can't read property id of undefined.

<div ng-click="changeBorder(value)" ng-class="{'active_borders':valueSelected.Id==value.Id}" ng-repeat="value in values">
    <img class="card-img-bottom" src="{{value.Imagen}}" />
</div>

Answer 7

Answer №4

Perhaps you might find this helpful. Try using the code snippet below with id="{{value.id}}"

<div id="{{value.id}}" ng-click="changeBorder(value)" ng-class="{active_borders:isActive(value)}" ng-repeat="value in values">
            <img class="card-img-bottom" src="{{value.Imagen}}" />
        </div>

Answer 8

Perhaps you might find this helpful. Try using the code snippet below with id="{{value.id}}"

<div id="{{value.id}}" ng-click="changeBorder(value)" ng-class="{active_borders:isActive(value)}" ng-repeat="value in values">
            <img class="card-img-bottom" src="{{value.Imagen}}" />
        </div>

The ng-class directive isn't functioning as anticipated when paired with ng-repeat

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible to incorporate Vue and Vuetify into an existing project that requires IE compatibility?

Avoiding Overlapping in Recharts Scatter Plot

Is there a way to display the number of active users currently on a page using Pusher?

Visual Studio Code unable to locate source maps for typescript debugging

When closing the menu in Bootstrap, the page automatically scrolls back to the top

Having trouble with res.redirect not working after the page has been rendered with data?

There seems to be a problem with the Bootstrap Container and Container Fluid

Here's a unique version: "Discovering how clients can easily connect to a new room using socketio

Unable to retrieve value from a hidden input field using JavaScript

Reordering sections in a dynamic manner

What is the process of using AJAX, JavaScript, and HTML to submit data to a remote

What is the reason for jQuery selector variables not functioning within namespaces?

Guide for adding Chinese characters with digital signature in your jsrsasign.js code

Steps to eliminate the select all checkbox from mui data grid header

Guide on Importing All Functions from a Custom Javascript File

Retrieve the data attribute of the "root" element within the React.js DOM

Having trouble using the `.not` function in jQuery

How can I transfer data from an API response containing an array of objects to a new array in a Vue.js

Using JavaScript, create a script that will automatically convert the value of an AJAX calendar to a datetime

Ways to focus on a specific div using JavaScript