如何为列表添加复选框

Question

所以我想为列表中的每个联系人添加一个复选框。这是我现在拥有的，但是出于某种原因，复选框没有显示在联系人姓名旁边！

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

Answer 1

正如 Lex 所提到的 - 您有一些与当前问题无关的代码 - 如果您不放置不相关的代码通常会更好，但我想在这种情况下这不是问题。

基本上，因为您使用的是自定义标签 - 您只需要 <ons-input type="checkbox"></ons-input>。

这里是 simple demo。

实际上，除非您正在做一些不寻常的事情，否则甚至不需要 ons-row 和 ons-cols - ons-list-item 提供此功能，如果您只需添加 left 和center 类到其 children.

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

如何为列表添加复选框

How to add a checkbox for lists

javascript

angularjs

onsen-ui