CODEWITHSUNDEEP
javascriptangularjsionic-framework
pixeloftdev
pixeloftdev

Reputation: 247

How can I increment an Angular ng-repeat function value?

I have an angular function that renders in the DOM based on a function in my controller that I need to increment in a timer. Can this be done? I also want several timers on one page that work independently. How can I go about this?

var app = angular.module('timer', []);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.behaviors = {
    "num": "1",
    "minutes": "30",
    "seconds": "15"
  }, {
    "num": "2",
    "minutes": "10",
    "seconds": "3"
  }, {
    "num": "3",
    "minutes": "5",
    "seconds": "43"
  };
  $scope.secondsX = function(behavior) {
    return 0;
  };
  $scope.minutesX = function(behavior) {
    return 0;
  };
  $scope.start = function(behavior) {
    durationTimer();
  };

  function durationTimer() {
    dtimeoutId = $timeout(function() {
      dupdateTime();
      durationTimer();
    }, 1000);
  }

  function dupdateTime() {
    $scope.secondsX = function() {
      return $scope.seconds++;
    }
    if ($scope.seconds === 60) {
      $scope.secondsX = function() {
        return 0;
      }
      $scope.minutesX = function() {
        return $scope.minutes++;
      }
    }
  }

});
<!DOCTYPE html>
<html ng-app="timer">

  <head>
    <meta charset="utf-8" />
    <title>Timer</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="[email protected]" src="https://code.angularjs.org/latest/angular.min.js" data-semver="4.0.0"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="behavior in behaviors">
      <span ng-model="minutes">{{minutesX(behavior)}}</span>
      <span ng-model="seconds">{{secondsX(behavior)}}</span>
      <button ng-click="start(behavior)">Start</button>
    </div>
  </body>

</html>

Upvotes: 1

Views: 622

Answers (2)

sujeet kumar srivastava
sujeet kumar srivastava

Reputation: 182

I just corrected the code seems working as you expected. Working code.

you will need to seperate the controller scope under for each loop. please refer line <div ng-controller="MainCtrl" ng-repeat="behavior in behaviors">.

<!DOCTYPE html>
<html ng-app="timer">

  <head>
    <meta charset="utf-8" />
    <title>Timer</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="[email protected]" src="https://code.angularjs.org/latest/angular.min.js" data-semver="4.0.0"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-controller="MainCtrl" ng-repeat="behavior in behaviors">
      <span ng-model="minutes">{{minutesX(behavior.minutes)}}</span>
      <span ng-model="seconds">{{secondsX(behavior.seconds)}}</span>
      <button ng-click="start(behavior)">Start</button>
    </div>

<script>
var app = angular.module('timer', []);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.behaviors = [{
    "num": "1",
    "minutes": "30",
    "seconds": "15"
  }, {
    "num": "2",
    "minutes": "10",
    "seconds": "3"
  }, {
    "num": "3",
    "minutes": "5",
    "seconds": "43"
  }];

  $scope.secondsX = function(behavior) {
    return behavior = 0;
  };
  $scope.minutesX = function(behavior) {
    return behavior = 0;
  };
  $scope.seconds = 0;
  $scope.minutes = 0;
  $scope.start = function(behavior) {
    //console.log('timer start ='+behavior.seconds);
    durationTimer(behavior);
  };
  function durationTimer(behavior) {
    dtimeoutId = $timeout(function() {
    $scope.seconds++;
    if ($scope.seconds === 60) {
        $scope.seconds = 0
        $scope.minutes++;
    }
        dupdateTime(behavior);
        durationTimer(behavior);
    }, 1000);
  }

  function dupdateTime(behavior) {
    console.log('current time = '+$scope.seconds)
    $scope.secondsX = function() {
        return behavior.seconds = $scope.seconds;
      }
    $scope.minutesX = function() {
      return behavior.minute = $scope.minutes;
    }
  }

});
</script>

</body>
</html>

Upvotes: 1

A W
A W

Reputation: 137

Okay so here's something: Why define $scope.secondsX as a function twice and here's the key, because its defined twice once incrementing some $scope var and another time doing nothing, however the first declaration does nothing with the behavior, this means the function will do nothing. Define the functions once with ++ on the behaviors.

Upvotes: 0

Related Questions