scope in angular and applied css class only on first div

Question

I'm calling js function every 2 seconds where on certain condition I want to update div on the view.

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

on 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;
            }
        }

using this code only first div in iteration is applied with class magictime puffIn. When I hardcode div id's on the view side like <div id="ball_1">1</div> <div id="ball_2">2</div> .. applied css class work on each div. What I'm doing wrong?

Update: Tried with

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

but problem is still present.

answered in this post. It's the same issue as why you can't write <a href="{{ngValue}}"> but have to use <a ng-href="{{ngValue}}"> — AndersRehn
– AndersRehn, Commented Sep 10, 2015 at 8:18
Perhaps I haven't understood your question entirely. When is the function setCurrentBallEffect() ever called? Perhaps provide more code, especially the part where the setCurrentBallEffect() function is called. — AndersRehn
– AndersRehn, Commented Sep 10, 2015 at 9:21

mehrdad · Accepted Answer · 2015-09-10 09:01:19Z

0

At first you must define

var myCounter =0;

I don't understand ball

you must defined it like this :

$scope.ball=0;

I Change view like this

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

and your javascript changed 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;
        }
    }

edited Sep 10, 2015 at 9:01

answered Sep 10, 2015 at 8:54

mehrdad

1149 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

scope in angular and applied css class only on first div

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related