複選框不可嵌套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-重複

回答

相關問題