AngularJS - repeat, diffrent counter for each row added

Question

Sorry for my english and im new to angularjs

I have a system so people can add there name to a break list.

i have a simple code for that.

Angular JS

  function ExampleCtrl($scope){
  $scope.people = [];


  $scope.addPerson = function(){
    var person = {
        name: $scope.name,
    };

    $scope.people.push(person);
  };

   $scope.removePerson = function(index){
    $scope.people.splice(index, 1);
   };


}

HTML

<input type="text" ng-model="name">
<button ng-click="addPerson()"></button>
<tr ng-repeat="person in people">
<td>{{ person.name }}</td>
<td>  </td>
<td><button ng-click="removePerson($index)"></button> </td>

What i want to make is a timer that starts at 00:00 when adding a person to the list and goes up for each secound. And for each new person that adds to the list, is a new 00:00 on the row(Next to there name), and starts counting. How can i manage to do this so each person has there own time?

EDIT:

Here is a picture of the webapp. Each time i add a new person, i want a counter to start from 00:00 and go upwards each secound, next to the name. (Red square)

https://i.sstatic.net/UsE9c.png

So if I understood correctly, you want to count the time between each add operation, right? — IT Warrior
– IT Warrior, Commented Apr 12, 2015 at 15:10
no, i want for each time you add a person. There is a time that starts at 00:00 on that person next to there name. And counts upwards each secound. If you add a new person, they get there own time that starts from 00:00, the timer starts when you add the person. — Realbunny
– Realbunny, Commented Apr 12, 2015 at 15:18

IT Warrior · Accepted Answer · 2015-04-12 15:56:04Z

1

function ExampleCtrl($scope, $interval){
  $scope.people = [];


  $scope.addPerson = function(){
    var person = {
        name: $scope.name,
        time: 0
    };

    $scope.people.push(person);
  };

   $scope.removePerson = function(index){
    $scope.people.splice(index, 1);
   };

   $interval(function() {
       angular.forEach($scope.people, function(person) {
           person.time++;
       }
   }, 1000);
}

and here is an example: http://plnkr.co/edit/aWavvTFMvZVXbn4IDSmx?p=preview

edited Apr 12, 2015 at 15:56

answered Apr 12, 2015 at 15:23

IT Warrior

1,53014 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Realbunny Over a year ago

cant' get the code to work, added {{ person.time }} but the time isent going up each secound. And if i add a new person i get a larger number at start

IT Warrior Over a year ago

try to use $interval service docs.angularjs.org/api/ng/service/$interval if still not working then try for loop instead of angular.forEach

IT Warrior Over a year ago

I've just tried it and it's working plnkr.co/edit/aWavvTFMvZVXbn4IDSmx?p=preview

Realbunny Over a year ago

sorry for asking, but is there a way to format it with min:sec(00:00)?

IT Warrior Over a year ago

make a custom filter to do so, or I think you may find something ready out there, try to google it.

Collectives™ on Stack Overflow

AngularJS - repeat, diffrent counter for each row added

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related