如何添加列表的複選框

所以我想添加列表中的每個聯繫人的複選框。這是我現在所擁有的，但由於某些原因，複選框不會顯示在聯繫人名稱旁邊！如何添加列表的複選框

<div ng-controller="ContactsController" > 
     <ons-list class="person-list" > 
     <ons-list-header class="person-list-header" ng-init="people = contacts">{{char}}</ons-list-header> 
      <ons-list-item class="person" modifier="tappable" ng-repeat="person in contacts | filter:searchInput"> 
      <ons-row> 

       <ons-col class="checkbox checkbox--list-item"> 
       <input type="checkbox"> 
       <div class="checkbox__checkmark checkbox--list-item__checkmark"></div> 
       </ons-col> 
       <ons-col class="person-name" ng-click="contactsBack(person.username)" > 
       {{person.username}} 
       </ons-col> 
      </ons-row> 
      </ons-list-item> 
     </ons-list>

來源

2016-04-04 Mohammed Islubee

當你說「它不工作」你是什麼意思？它在做什麼，它與你期望的做法有什麼不同？ – Lex

複選框沒有被添加/顯示在聯繫人名稱旁邊。我期望它執行的操作是將所選聯繫人添加到數組以創建組消息。現在，我試圖讓複選框正常工作，這樣我就可以將聯繫人添加到數組中。 –

從表面上看，除了一些奇怪的東西（不知道你在使用'ng-init'以及'{{char}}是什麼，或者在哪裏定義了searchInput''，它看起來應該是有效的。也許你可以創建一個JSFiddle或Plunker來說明你遇到的問題。 – Lex

如萊克斯提到的 - 你有一些代碼，這是不相關的當前問題 - 它通常是更好，如果你不把代碼是無關緊要的，但我想這不是在這種情況下的一個問題。

基本上，因爲您使用的是自定義標籤 - 所有您需要的是<ons-input type="checkbox"></ons-input>。

這裏是simple demo。

其實並不真正需要連ons-row和ons-col小號，除非你正在做一些不尋常的 - ons-list-item提供了這個功能，如果你只需要添加left和center類的孩子。

<ons-list-item class="person" modifier="tappable" ng-repeat="person in contacts"> 
    <ons-input type="checkbox" class="left" input-id="input-{{$index}}"></ons-input> 
    <label class="center" for="input-{{$index}}">{{person.username}}</label> 
</ons-list-item>

來源

2016-04-04 03:36:23

如何添加列表的複選框

回答

相關問題