Javascript 嵌套ng repeat中的复选框不可单击

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

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

{{oConfigEntry.sdesdescription}
{{{oConfigSubEntry.sdesdescription}
{{oConfigSubEntry.bNoOption}

{{{oConfigSubEntry.sdesdescription}}

看

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

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

另一种方法是，如果相应的模型已初始化，则复选框已选中，但不能通过单击复选框来取消选中

如果将未指定模型的普通复选框放置在嵌套的

ng repeat

中，则无法选中这些复选框

e、 g

有没有人已经注意到这种现象

其他观察结果：

• 第一次单击复选框将更改模型的值
• 后续单击不会更改该值。模型的价值保持不变 一样
• 当第一次单击复选框时，会更改 模型中，复选框本身保持选中/未选中状态，具体取决于 模型的初始值

---

我猜另一个元素的位置会覆盖或重叠复选框，这会阻止您与它交互。假设您没有应用于标记的内联样式，您可以通过在浏览器中禁用CSS轻松测试这一点（您可能需要安装一个扩展来实现这一点，例如：）

---

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

在实际应用程序中，显示所述行为的复选框位于一个列表中，该列表通过一个小小的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();
});

看

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

罪魁祸首是显而易见的：

返回false

这会停止事件的传播，并明显干扰复选框

吸取的教训：


检查javascript、jQuery等是否干扰angularjs
考虑写一个角度指令
是否将复选框包装到
标签中
？不，它们的放置方式与上述示例相同，而不是包装到
标签中
…非常感谢您的提示，我在浏览器中禁用了CSS，如链接中所述。。。不幸的是，复选框仍然无法检查/点击……你的提示引导我走上正确的轨道，也把JavaScript视为可能的罪魁祸首……很高兴听到它…js正在禁用它吗？js干扰到定义了一个自定义单击处理程序，该处理程序返回
false
。。。。我忽略了一个细节。。。