CODEWITHSUNDEEP
javascriptjqueryangularjshtml
Yogesh Ghaturle
Yogesh Ghaturle

Reputation: 267

AngularJs Counter to count up to a specific target number

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.

Upvotes: 1

Views: 1816

Answers (1)

AWolf
AWolf

Reputation: 8990

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>

Upvotes: 1

Related Questions