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

如何为列表添加复选框

1 个答案: