Angular UI Bootstrap 手风琴标题无法与复选框一起正常工作答案

【问题标题】：Angular UI Bootstrap accordion heading not working correctly with checkboxAngular UI Bootstrap 手风琴标题无法与复选框一起正常工作
【发布时间】：2015-08-27 22:27:53
【问题描述】：

我在 bootstrap 的手风琴控件标题中使用了一个复选框，但模型只会在第一次单击时更新。这是手风琴的 HTML：

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

点击方法在我的打字稿控制器中：

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

如果我只是单独使用 stopPropagation() 方法，它会正确更新模型并选中复选框，但是，它会刷新页面。 preventDefault() 方法阻止了这种情况的发生，但随后它只会更新一次模型而不选中复选框。

我已经尝试使用 ng-bind，它实际上会正确更新模型，但不会将复选框更改为选中。

如果我在手风琴之外使用复选框，它会按预期工作，我对此没有任何问题。我不确定我在这里做错了什么？

【问题讨论】：

我很好奇，ng-repeat="timesheet in timesheets"的目的是什么？
这个系统的用户每周都有一个时间表。每周，用户都需要输入他们在工作中的工作时间，以便他们的经理可以批准他们所做的工作。
我的错，让我换个说法，如果你永远不会像timesheet.something那样使用timesheet，为什么还要打电话给ng-repeat="timesheet in timesheets"？我可能只是错过了一些东西。
哎呀！抱歉，这里误会了。我确实在我使用的实际代码中使用了 timesheet 对象，但我只是将 sn-p 保持在最低限度，因为其他东西是无关紧要的。

标签： angularjs checkbox typescript accordion angular-ui

【解决方案1】：

我相信你的代码可以工作，但它只适用于 Angularjs 1.2.x 和 ui-bootstrap-tpls 0.11 版（早期版本可能工作）。

您的代码类似于以下帖子...

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

如果您使用的是 Angular 1.3.x，那么您需要在 ng-click 内添加停止传播...

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

这个例子得益于下面的帖子...

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

这也确实适用于我的情况。

【讨论】：

听起来不错。我也厌倦了添加指令并在模块中创建复选框，我实际上可以通过这种方式更改复选框的状态，但我不知道如何将其链接到模型。也许尝试以这种方式实现它，看看是否可以正确连接模型。
您的解决方案仍然给我与以前相同的结果。该复选框实际上按预期工作，但单击它后页面会刷新。 $event.preventDefault(); 停止刷新，但不允许与复选框交互。

【解决方案2】：

顺便说一句，我不知道你是否解决了这个问题，但我有同样的问题，但是为了显示正确的选中复选框，我添加了这个：

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

而我只有 stopPropagation 方法。但实际上第一次点击是不行的！

【讨论】：