javascript - 使用 ng-repeat 为特定记录动态数据的按钮切换

Question

我正在尝试在 javascript 中为记录列表实现停止和启动计时器。我正在使用 ng-repeat 来显示所有元素。我正在为每个重复的元素放置开始/停止切换按钮。但问题是假设我有 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;
  }
}