Кнопка Toggle для динамических данных для конкретной записи с использованием ng-repeat

Question

Я пытаюсь реализовать таймер остановки и запуска в javascript для списка записей. Я использую ng-repeat, чтобы отобразить все элементы. Я помещаю переключатель Start / Stop для каждого повторяющегося элемента. Но проблема в том, чтоя получаю 4 записи, если я нажимаю таймер запуска для 4-ой записи, то первая кнопка записи меняется на Стоп. При нажатии на кнопку всегда первая кнопка записи переключается.

Вот мой HTML

    <ul class="list-group" data-ng-repeat="job in 
    allAppliedJobsForTimeTracker">
    <li class="list-group-item">{{job.title}} Hours : {{job.hours}} 
    <input type="button" name="btn" id='btn' value="Start" data-ng-
    click="startTimeTracker(job)" onclick="to_start()";> </li>
    </ul>

Вот мой сценарий

    <script language=javascript>
    var h=0;
    var m=0;
    var s=0;
    function to_start(){

    switch(document.getElementById('btn').value)
    {
    case  'Stop':
    window.clearInterval(tm); // stop the timer 
    document.getElementById('btn').value='Start';
    break;
    case  'Start':
    tm=window.setInterval('disp()',1000);
    document.getElementById('btn').value='Stop';
    break;
    }
    }

    function disp(){
    // Format the output by adding 0 if it is single digit //
    if(s<10){var s1='0' + s;}
    else{var s1=s;}
    if(m<10){var m1='0' + m;}
    else{var m1=m;}
    if(h<10){var h1='0' + h;}
    else{var h1=h;}
    // Display the output //
    str= h1 + ':' + m1 +':' + s1 ;
    document.getElementById('n1').innerHTML=str;
    // Calculate the stop watch // 
    if(s<59){ 
    s=s+1;
    }else{
    s=0;
    m=m+1;
    if(m==60){
    m=0;
    h=h+1;
    } // end if  m ==60
    }// end if else s < 59
    // end of calculation for next display
    }
    </script>

Я хочу изменить кнопку только для строки записи, по которой щелкнули. Не для первой записи. Кто-нибудь может сказать, как мне этого добиться?

Answer 1

Вы получаете первое вхождение btn.Вместо getElementById используйте event.target.Как то так

<input 
  type="button" 
  name="btn" 
  id="btn" 
  value="Start" 
  data-ng-click="startTimeTracker(job)" 
  onclick="to_start(event)" 
/>

function to_start(event) {
  switch(event.target.value) {
    case 'Stop':
      window.clearInterval(tm); // stop the timer 
      event.target.value='Start';
      break;
    case 'Start':
      tm=window.setInterval('disp()',1000);
      event.target.value='Stop';
      break;
  }
}