1

I'm using a check box in the heading of the accordion control in bootstrap, but the model will only update the first time it's clicked. Here's the HTML for the accordion:

 <accordion ng-repeat="timesheet in timesheets">
            <accordion-group>
                <accordion-heading>
                    Title
                    <input type="checkbox" ng-model="approvals.rejected" ng-click="approvals.timesheetChecked($event)"/>
                </accordion-heading>
            </accordion-group>
  </accordion>

the click method is in my typescript controller:

timesheetChecked($event: Event) {
    $event.stopPropagation();
    $event.preventDefault();
}

If I just use the stopPropagation() method by itself it updates the model correctly and the check box is checked, however, it will then refresh the page. The preventDefault() method stops this from happening, but then it will then only update the model once and not check the check box.

I have tried using ng-bind and that will actually update the model with correctly, but it will not change the check box to checked.

If I use the check box outside of the accordion it works as expected and I have no problems with it. I'm not really sure what I am doing wrong here?

Daniel Hakimi
  • 1,153
  • 9
  • 16
  • I'm curious, what's the purpose of `ng-repeat="timesheet in timesheets"`? – Edd Jan 28 '15 at 09:21
  • Users of this system have a time sheet for each week they work. Every week, a user needs to put in the amount of hours they work on a job, so their manager can then approve what they have done. – Daniel Hakimi Jan 28 '15 at 09:56
  • My bad, let me rephrase, why do you call `ng-repeat="timesheet in timesheets"` if you are never going to use `timesheet` as in `timesheet.something`? I'm probably just missing something. – Edd Jan 28 '15 at 10:12
  • Whoops! Sorry, misunderstood there. I do use the timesheet object in actual code I'm using, but I just kept the snippet minimal, because the other stuff is irrelevant. – Daniel Hakimi Jan 28 '15 at 12:53

2 Answers2

0

I believe your code would work, but it only works with Angularjs 1.2.x and ui-bootstrap-tpls version 0.11 (earlier versions may work).

Your code is similar to the following post...

https://stackoverflow.com/a/24502123/3807872

If you are using Angular 1.3.x, then you will want to add the stop propagation inside of the ng-click...

<input type="checkbox" ng-model="approvals.rejected" ng-click="approvals.timesheetChecked($event);$event.stopPropagation();"/>

This example was in thanks to the following post...

https://stackoverflow.com/a/14545010/3807872

This really worked for my situation as well.

Community
  • 1
  • 1
naiJenn
  • 91
  • 1
  • 7
  • Sounds good. I also tired adding a directive and creating the check boxes in the module, I could actually change the state of the check box this way, but I couldn't figure out how to link it to the model. Maybe try and implement it this way and see if you can hook up the model correctly. – Daniel Hakimi Feb 05 '15 at 23:33
  • 1
    Your solution is still giving me the same results I had before. The check box actually works as expected, but after it has been clicked the page refreshes. `$event.preventDefault();` stops the refresh, but doesn't allow interaction with the check box. – Daniel Hakimi Feb 08 '15 at 23:17
0

By the way, I don't know if you have fixed this issue but I have the same problem, however for displaying the right checked checkbox I've added this:

ng-checked="approvals.rejected == 'true'"

and I only stopPropagation method. But actually it doesn't work for the first click!

Shilan
  • 813
  • 1
  • 11
  • 17