在angularJS表中生成动态按钮

Question

我使用 ng-repeat =

填充动态表格

如何使按钮动态化，因为按钮类型为硬代码，所有停止计时器按钮一旦点击启动按钮就会被禁用。 表格已经提交了n次。

<table class="table">
    <tr>
        <th>Name
        </th>
        <th>Employees
        </th>
        <th>Head Office
        </th>
    </tr>
    <tr ng-repeat="updateLeadEnvir in envirDetailsData">
        <td>{{updateLeadEnvir.envirName}}
        </td>
        <td>{{updateLeadEnvir.envirDesc}}
        </td>
        <td><button ng-click="hidetimer = {{updateLeadEnvir.envirName}}; startTimer()" ng-disabled="timerRunning">Start Timer</button>
        <button type="button" ng-click="stopTimer();hideMsg=true" ng-disabled="!timerRunning">Stop Timer</button>
        <div class="col-xs-8 text-center" ng-show="hidetimer == {{updateLeadEnvir.envirName}}" > <timer>{{minutes}} minutes, {{seconds}} seconds.</timer></div>
        </td>
    </tr>
</table>

Answer 1

每次使用ng-repeat时，都会为每个项目创建一个范围。在此范围内，可以使用$index变量。因此，您可以使用此$ index值并启动与$index相关的计时器。

<tr ng-repeat="updateLeadEnvir in envirDetailsData">
    <!-- Code -->
    <td>
      <button ng-click="startTimer($index)" ng-disabled="timerRunning">Start Timer</button>
      <button type="button" ng-click="stopTimer($index)" ng-disabled="!timerRunning">Stop Timer</button>
      <div class="col-xs-8 text-center" ng-show="hidetimer == {{updateLeadEnvir.envirName}}" > <timer>{{minutes}} minutes, {{seconds}} seconds.</timer></div>
    </td>
</tr>

您要发出的另一个问题是，只要您点击任何按钮，表单就会被提交。尝试在按钮中使用type="button"，这样就不会发生

<button type="button"></button>