AngularJs Counter to count up to a specific target number

Question

I am trying to create a counter using Angularjs which should count up to a number which is already present in that division. Here is my html snippet.

    <div  class="circle-home">
      <span class="circle-home-score " id="counterofreviews" data-count="{{noReviews}}">{{noReviews}}</span> REVIEWS
    </div>

Now when I am trying to get the value inside the span I get it as {{noReviews}} instead of its value.

Here is my AngularJs code.

    var demoApp = angular.module(['demoApp','ngRoute','ui.bootstrap']);

    demoApp.controller('SearchController',function ($scope, $http, $facebook, $interval){

    $scope.noReviews=100;
    $scope.childOnLoad = function() {

    $scope.uppercount=$("#counterofreviews").text();
    $scope.no_Reviews=0;
    console.log($scope.uppercount);

    var stop;
    stop = $interval(function() {
    if ($scope.uppercount >$scope.no_Reviews) {

         $scope.noReviews=$scope.no_Reviews;
         $scope.no_Reviews++;
         console.log('Inside if statement');
     } else {
       $scope.stopFight();
     }
    }, 100);

   };

   $scope.stopFight = function() {
   if (angular.isDefined(stop)) {
   $interval.cancel(stop);
   stop = undefined;
    }
   };


   $scope.childOnLoad();

   };

Output of console.log($scope.uppercount) is {{noReviews}}. I am unable to figure out a proper way to do it. Please suggest the correction or any other better method for the same perpose.

You should probably do this as a directive as it includes DOM manipulation. And here uppercount would be a string as extracted using text method might want to covert it to a number to test it again other numbers. — GillesC
– GillesC, Commented Jun 3, 2015 at 20:29
wait, angular.module('demoApp','ngRoute','ui.bootstrap']); missing a [ for the dependencies. and ('SearchController',function SearchController($scope, $http, $facebook, $interval) should be just ('SearchController, function($scope,....) right? there ought to be some errors in your console with your current code, unless you just typed it incorrectly here. Please make it a jsfiddle or plunker and narrow down to just the relevant code =) — Shehryar Abbasi
– Shehryar Abbasi, Commented Jun 3, 2015 at 20:55

AWolf · Accepted Answer · 2015-06-03 20:59:33Z

Not sure why do you use jQuery to get the #counterofreviews value. Is the value there because it's added from a server side script?

As mentioned in the comments, your code is probably not working because jQuery.text() is returning a string. Using parseInt(text) could work.

Please have a look at the demo below and here at jsfiddle.

It's more Angular and should help you getting started with your counter.

var demoApp = angular.module('demoApp', []); //'ngRoute','ui.bootstrap']);

demoApp.controller('SearchController', function ($scope, $http, $interval) { //$facebook,

    $scope.noReviews = 100;
    //$scope.childOnLoad = function () {

    this.upperCount = 10; //$("#counterofreviews").text();
    console.log(this.upperCount);

    var stop;
    
    this.startCounter = function () { // needed for re-run on change
        //console.log(stop, this);
        this.no_Reviews = 0;
        if ( angular.isUndefined(stop) )
            stop = $interval(checkCount.bind(this), 100);
    };
    
    this.startCounter();
    //};

    function checkCount() {
        if (this.upperCount >= this.no_Reviews) {

            this.noReviews = this.no_Reviews;
            this.no_Reviews++;
            //console.log('Inside if statement');
        } else {
            stopFight();
        }
    }
    
    function stopFight() {
        if (angular.isDefined(stop)) {
            $interval.cancel(stop);
            stop = undefined;
        }
    };


    //$scope.childOnLoad();

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" class="circle-home" ng-controller="SearchController as ctrl">Review max.:
    <input ng-model="ctrl.upperCount" ng-change="ctrl.startCounter()"/> <span class="circle-home-score " id="counterofreviews" data-count="{{ctrl.upperCount}}">{{ctrl.noReviews}}</span> REVIEWS</div>

I don't want to have a input tags. I already have the noReviews with me. I just want to run the counter when the page loads.
Yeah this works, but how to get this working without input tags? How to get it on the existing value in the controller without any input tags ?
With a directive you can get the value. Please have a look at this jsfiddle
Yup the jsfiddle given in last comment works but instead of having 10 in the first span what if we have {{noReviews}} in it. How do we get it working?
I'm not exactly sure what you mean. But I think you want to add the max. value from your controller to the DOM. Then you could use {{ctrl.upperCount}}. See this fiddle.

Collectives™ on Stack Overflow

AngularJs Counter to count up to a specific target number

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related