javascript - 嵌套 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" />

有人已经注意到这样的现象了吗？

其他观察结果:

• 第一次单击该复选框会更改模型的值。
• 后续点击不会更改该值。模型的值(value)仍然是相同的。
• 虽然第一次单击该复选框会更改模型，复选框本身保持选中/未选中状态，具体取决于模型的初始值。

Answer 1

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

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