up vote 1 down vote favorite

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>
share|improve this question
    
Please include your startTimer() function in your description – Louie Almeda Feb 11 '16 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 Feb 11 '16 at 1:46
    
And your handling too much logic on your html, it should be on your controllers – Louie Almeda Feb 11 '16 at 1:47
up vote 1 down vote

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>
share|improve this answer
    
How do i use index to enable disable the buttons.. All the stop buttons are getting enabled at once.. – Nayeem Feb 11 '16 at 1:53
    
You could use something like this: jsbin.com/cunebazafe/edit?html,js,output – Igor Santana Feb 11 '16 at 2:10
    
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}}" – Nayeem Feb 11 '16 at 3:06
    
Its still getting submitted 10 times... – Nayeem Feb 11 '16 at 4:23
    
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 – Igor Santana Feb 11 '16 at 23:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.