Question

我有一个角度函数，根据我的控制器中的函数在DOM中呈现我需要在计时器中递增。可以这样做吗？我还想在一个页面上独立工作的几个计时器。我怎么能这样做呢？

＆＃13;

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++;
      }
    }
  }

});

＆＃13;

<!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="angular.js@1.0.x" 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>

＆＃13;

Answer 1

我刚刚纠正了代码似乎按预期工作。 Working code

您需要为每个循环分隔控制器范围。请参阅第<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="angular.js@1.0.x" 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>

Answer 2

好的，所以这里有一些东西：为什么将$ scope.secondsX定义为函数两次并且这里是键，因为它定义了两次一次递增一些$ scope var而另一次没有做任何事情，但是第一个声明对行为没有任何作用，这意味着函数将没做什么。使用++在行为上定义一次函数。

如何增加Angular ng-repeat函数值？

2 个答案: