复选框在嵌套的 ng-repeat 中不可点击

Question

为了了解我在应用程序中使用的设置，我设置了这个简化的示例：

<div ng-controller="Ctrl">
    <ul>
        <li ng-repeat="oConfigEntry in oConfiguration.oConfigEntriesColl">
            <ul>{{oConfigEntry.sDescription}}
                <li ng-repeat="oConfigSubEntry in oConfigEntry.oConfigSubEntriesColl">{{oConfigSubEntry.sDescription}}
                    <input type='checkbox' ng-model='oConfigSubEntry.bNoOption' />{{oConfigSubEntry.bNoOption}}
                    <ul>
                        <li ng-repeat='oConfigSubSubEntry in oConfigSubEntry.oConfigSubSubEntriesColl'>{{oConfigSubSubEntry.sDescription}}
                            <input type='number' placeholder='length' ng-model='oConfigSubSubEntry.dLength' />
                            <input type='number' placeholder='width' ng-model='oConfigSubSubEntry.dWidth' />
                            <input type='number' placeholder='height' ng-model='oConfigSubSubEntry.dHeight' />
                            <input type='checkbox' title='opt1' ng-model='oConfigSubSubEntry.bOpt1' />
                            <input type='checkbox' title='opt2' ng-model='oConfigSubSubEntry.bOpt2' />
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
<pre ng-bind="oConfiguration | json"></pre> 
</div>

见http://jsfiddle.net/ppellegr/4QABQ/

不幸的是，我在实际应用程序中遇到的问题无法在后面提到的示例中重现。

问题是在实际应用程序中，复选框不可点击。单击复选框不会选中它们。复选框保持未选中状态。

相反，如果相应的模型已初始化，则复选框被选中，但不能通过单击取消选中。

如果将它们放置在嵌套的ng-repeat 中，即使没有分配模型的普通复选框也无法检查。

例如

<input type="checkbox" />

有没有人注意到这种现象？

补充意见：

• 第一次单击复选框会更改模型的值。
• 后续单击不会更改该值。模型的价值仍然是 相同的。
• 第一次单击复选框时，会更改 模型，复选框本身保持选中/未选中取决于 模型的初始值。

Answer 1

在实际应用程序中，显示所描述行为的复选框位于一个列表中，该列表由一个小的 jQuery 功能丰富，使列表可折叠和可展开...

function prepareList() {
    $('#ConfigContainer').find('li:has(ul)')
        .click(function (event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
        .addClass('collapsed')
        .children('ul').hide();
}

$(document).ready(function () {
    prepareList();
});

见http://jsfiddle.net/ppellegr/cP726/

在这个例子中，所描述的行为可以重现......

罪魁祸首很明显：

return false;

这会阻止事件的传播，显然会干扰复选框...

经验教训：

• 检查javascript、jQuery等是否对angularjs有干扰...
• 考虑编写一个角度指令...

Answer 2

我的猜测是，另一个元素的位置会覆盖或重叠复选框，这会阻止您与它进行交互。假设您的标记没有应用内联样式，您可以通过在浏览器中禁用 CSS 来轻松测试这一点（您可能需要安装扩展来执行此操作，例如：How to disable CSS in Browser for testing purposes）。

如果你发现你可以像这样点击复选框，那么你需要调试你的 CSS 来找到有问题的元素。使用 firebug 或 chrome 开发者工具探索标记和 css。