复选框不可嵌套NG-重复

内点击为了让我用在我的应用程序设置了这个简化的例子设置的一个想法：复选框不可嵌套NG-重复

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

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

补充意见：

上的复选框第一次单击更改模型的价值。
后续点击不会更改该值。该模型的价值仍然是相同。
虽然第一次点击复选框会更改模型的值，但取决于模型的初始值，复选框本身保持选中/取消选中状态。

来源

2014-04-24 oreipele

你包装成复选框' label'？ – dfsq

没有他们在上面的例子中，不挤包成'label' ... – oreipele

在实际应用中显示所描述的行为的复选框是由一个小的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被干扰...
考虑写一个角指令...

来源

2014-04-25 08:50:31 oreipele

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

如果你发现你可以点击这个复选框，然后你需要调试你的CSS来找到有问题的元素。使用萤火虫或铬开发工具来探索标记和CSS。

来源

2014-04-24 08:50:19

非常感谢您的提示放置就好了，我在浏览器中禁用的CSS，像链接描述...不幸的复选框仍然没有可检查的/ clickable ... – oreipele

你的提示使我在正确的轨道上也认为JavaScript是可能的罪魁祸首... – oreipele

很高兴听到它...是js禁用它？ –

复选框不可嵌套NG-重复

回答

相关问题