javascript - AngularJs 计数器可计数到特定目标数

Question

我正在尝试使用 Angularjs 创建一个计数器，它应该计数到该部门中已经存在的数字。这是我的 html 片段。

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

现在，当我尝试获取范围内的值时，我将其获取为 {{noReviews}} 而不是它的值。

这是我的 AngularJs 代码。

    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();

   };

console.log($scope.uppercount) 的输出是 {{noReviews}}。我无法找出正确的方法来做到这一点。请针对相同目的提出更正或任何其他更好的方法。

Answer 1

不知道为什么使用 jQuery 来获取 #counterofreviews 值。那里的值是因为它是从服务器端脚本添加的吗？

正如评论中提到的，您的代码可能无法正常工作，因为 jQuery.text() 返回一个字符串。使用 parseInt(text) 可以工作。

请查看下面的演示以及此处的 jsfiddle .

它更具 Angular 风格，应该可以帮助您开始使用计数器。

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>