Angular's scope allows for the application of CSS classes exclusively to the first div element

Question

Angular's scope allows for the application of CSS classes exclusively to the first div element

Every 2 seconds, a JavaScript function is being called that updates a specific div on the view when a certain condition is met.

 <div id="ball_{{ballIndex}}">{{ball}}</div>

This is controlled by the ng controller.

       var myCounter = 0;

        var interval = $interval(function () {
            if (myCounter <= 35) {
                myCounter ++;
                DoSomething();
            } else {
                //
            }
        }, 1500);

        function setCurrentBallEffect() {
            $('#ball_' + myCounter).addClass('magictime puffIn');                
        }

        function DoSomething() {
            if (myCounter == 0) {
                $scope.ballIndex = 1;
            } else {
                $scope.ballIndex = myCounter;
            }
        }

Only the first div in each iteration is being applied with the class "magictime puffIn". When I manually set div IDs on the view like

<div id="ball_1">1</div>

<div id="ball_2">2</div>

, the applied CSS class works on each div. What could be the issue?

Update: Tried using

<div ng-attr-id="{{ 'ball_' + ballIndex }}"> </div>

But the problem persists.

javascript jquery css angularjs

Answer 1

Answer №1

Initially, it is important to establish

var myCounter =0;

I'm baffled by ball

The proper way to define it is:

$scope.ball=0;

I Modify the view in this manner

<div id="ball_{{ballIndex}}">{{ballIndex}}</div>

and your javascript adjustment looks like this:

var poolCounter = 0;
    var myCounter = 0;

    var interval = $interval(function () {
        if (myCounter <= 35) {
            myCounter++;
            DoSomething();
        } else {
            //
        }
    }, 1500);

    function setCurrentBallEffect() {
        $('#ball_' + myCounter).addClass('magictime puffIn');
    }

    function DoSomething() {
        if (myCounter == 0) {
            $scope.ballIndex = 1;
        } else {
            $scope.ballIndex = myCounter;
        }
    }

Answer 2

Initially, it is important to establish

var myCounter =0;

I'm baffled by ball

The proper way to define it is:

$scope.ball=0;

I Modify the view in this manner

<div id="ball_{{ballIndex}}">{{ballIndex}}</div>

and your javascript adjustment looks like this:

var poolCounter = 0;
    var myCounter = 0;

    var interval = $interval(function () {
        if (myCounter <= 35) {
            myCounter++;
            DoSomething();
        } else {
            //
        }
    }, 1500);

    function setCurrentBallEffect() {
        $('#ball_' + myCounter).addClass('magictime puffIn');
    }

    function DoSomething() {
        if (myCounter == 0) {
            $scope.ballIndex = 1;
        } else {
            $scope.ballIndex = myCounter;
        }
    }

Angular's scope allows for the application of CSS classes exclusively to the first div element

Answer №1

Similar questions

Dragging items in the horizontal list of Knockout-Sortable causes them to be pushed vertically

What is the best way to preload a font with a hashed filename and style hosted on a CDN?

Transfer information(text) to the clipboard using Vue (Nuxt js)

Assign a Value to a Hidden Input Type When a User Submits a Form

What is the method to extract information from the provided URL?

The ExpressJS middleware is executing twice

Error in Heroku deployment - Express and React app displaying a white screen

How can I replicate the functionality of the span element using Javascript?

String includes another String not refreshing automatically

Calculate the combined sum and alter the values of three input fields

If a radio button is either selected or deselected, a jQuery alert will display the value of the radio button

The jQuery selectors are not able to identify any dynamically generated HTML input elements

Adding a specialized loader to vue-loader causes issues when the template contains personalized elements

Using jQuery to dynamically populate select options based on JSON data

Images set as the og:image on the following 14 websites hosted on Vercel require authentication to be displayed

Res.redirect() function does not redirect the browser URL as expected when triggered by a request made through a frontend fetch() call

Transferring data from one function to another function

Changing the style of opening curly braces in JavaScript code styling

The initial item in the ng-option mysteriously disappears

Perform a task upon clicking the JavaScript menu