在angularJS表中生成动态按钮答案

【问题标题】：Generate dynamic buttons in angularJS table在angularJS表中生成动态按钮
【发布时间】：2016-02-11 01:39:45
【问题描述】：

我有一个使用 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>

【问题讨论】：

请在您的描述中包含您的startTimer()函数
您需要单独维护每行计时器的状态，而不是维护所有按钮的状态。您可以在一个顶级控制器中执行此操作，或者如果可能，通过创建一个新指令来呈现单行并单独跟踪其状态。您可能还需要更改 <timer> 指令，以便拥有多个独立运行的副本。
您在 html 上处理的逻辑过多，应该在您的控制器上

标签： javascript angularjs button

【解决方案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>

【讨论】：

我如何使用索引来启用禁用按钮..所有停止按钮都立即启用..
你可以这样使用：jsbin.com/cunebazafe/edit?html,js,output
如何将值从按钮传递到控制器？例如 {{updateLeadEnvir.envirName}}.. 我无法在 ng-click="stopTimer($index)" 中访问它，例如 ng-click="stopTimer({{updateLeadEnvir.envirName}})" 但能够访问独立的 id="{{updateLeadEnvir.envirName}}"
您不需要{{}}，只需将其作为变量传递即可。如果你把type="button"放在每个按钮中，它就不会提交表单
在 ng-repeat 中重复提交，即使我输入 type="button"