CODEWITHSUNDEEP
javascriptangularjsbutton
Nayeem
Nayeem

Reputation: 701

Generate dynamic buttons in angularJS table

I have a dynamic table being populated using ng-repeat=

How can i make the buttons dynamic , as buttons kind of hard code , all the stop timer buttons are getting disables once the starttimer button is clicked once. And form is getting submitted n number times.

enter image description here

<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>

Upvotes: 1

Views: 797

Answers (1)

Igor Santana
Igor Santana

Reputation: 143

Everytime you use ng-repeat, it creates a scope for each of the items. Inside this scope, there's a $index variable that can be used. So, you could use this $index value and start the timer related to that $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>

Another problem that you are issuing is that the form is being submitted whenever you click in any button. Try using type="button" in the buttons so this doesn't happen

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

Upvotes: 1

Related Questions