Generate dynamic buttons in angularJS table

Question

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.

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

Please include your startTimer() function in your description — Louie Almeda
– Louie Almeda, Commented Feb 11, 2016 at 1:45
Rather than maintaining the state for all the buttons, you need to maintain the state for each row's timer individually. You can either do that in the one top level controller, or if possible, by creating a new directive to render a single row and keep track of its state in isolation. You may also need to change your <timer> directive as well so you can have multiple copies that function independently. — GregL
– GregL, Commented Feb 11, 2016 at 1:46
And your handling too much logic on your html, it should be on your controllers — Louie Almeda
– Louie Almeda, Commented Feb 11, 2016 at 1:47

Igor Santana · Accepted Answer · 2016-02-11 02:11:20Z

1

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>

edited Feb 11, 2016 at 2:11

answered Feb 11, 2016 at 1:47

Igor Santana

1432 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nayeem Over a year ago

How do i use index to enable disable the buttons.. All the stop buttons are getting enabled at once..

Igor Santana Over a year ago

You could use something like this: jsbin.com/cunebazafe/edit?html,js,output

Nayeem Over a year ago

How can i pass a value from button to controller? Like for instance {{updateLeadEnvir.envirName}}.. Iam not able to access it inside ng-click="stopTimer($index)" like ng-click="stopTimer({{updateLeadEnvir.envirName}})" but able to access indie the id="{{updateLeadEnvir.envirName}}"

Igor Santana Over a year ago

You don't need the {{}}, just pass it as a variable. If you put type="button" in every button, it'll not submit the form

Nayeem Over a year ago

In ng-repeat its repeatedly submitting even i put type="button"

Collectives™ on Stack Overflow

Generate dynamic buttons in angularJS table

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related