Wie Sie ein Kontrollkästchen für Listen

hinzufügen, so versuche ich, ein Kontrollkästchen für jeden Kontakt in der Liste hinzuzufügen. Dies ist, was ich für jetzt habe, aber die Checkboxen werden aus irgendeinem Grund nicht neben den Kontaktnamen angezeigt!Wie Sie ein Kontrollkästchen für Listen

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

Quelle

2016-04-04 Mohammed Islubee

Wenn Sie sagen "es funktioniert nicht" was meinst du? Was macht es und wie unterscheidet es sich von dem, was Sie erwarten? – Lex

Checkboxen werden nicht neben den Kontaktnamen hinzugefügt/angezeigt. Ich erwarte, dass der ausgewählte Kontakt zu einem Array hinzugefügt wird, um eine Gruppennachricht zu erstellen. Momentan versuche ich, die Checkboxen zu aktivieren, damit ich daran arbeiten kann, Kontakte zum Array hinzuzufügen. –

Auf der Oberfläche, abgesehen von einigen seltsamen Sachen (nicht sicher, was Sie verwenden 'ng-init' für noch was' {{char}} 'ist oder wo' searchInput' definiert ist) es sieht aus wie es sollte funktionieren. Vielleicht können Sie eine JSFiddle oder Plunker erstellen, um das Problem zu veranschaulichen, das Sie haben. – Lex

Als Lex erwähnt - Sie einen Code haben, die nicht relevant für das aktuelle Problem ist - es ist in der Regel besser, wenn Sie setzen Code nicht, die irrelevant ist, aber ich denke, es ist in diesem Fall kein Problem.

Grundsätzlich, da Sie die benutzerdefinierten Tags verwenden - alles, was Sie brauchen, ist <ons-input type="checkbox"></ons-input>.

Hier ist ein simple demo.

Eigentlich sogar die ons-row und ons-col s sind nicht wirklich nötig, wenn Sie etwas Ungewöhnliches tun - ons-list-item bietet diese Funktionalität, wenn Sie nur left und center Klassen seiner Kinder hinzuzufügen.

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

Quelle

2016-04-04 03:36:23

Wie Sie ein Kontrollkästchen für Listen

Antwort

Verwandte Themen