Question

我在bootstrap中使用accordion控件标题中的复选框，但模型只会在第一次单击时更新。这是手风琴的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>

click方法位于我的打字稿控制器中：

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

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

我尝试过使用ng-bind，但实际上会正确更新模型，但不会更改复选框以进行检查。

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

Answer 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

这对我的情况也很有用。

Answer 2

顺便说一句，我不知道您是否已修复此问题，但我遇到了同样的问题，但是为了显示正确选中的复选框，我已添加了此内容：

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

我只停止传播方法。但实际上第一次点击它并不起作用！

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

2 个答案: