ionic checkbox 精简用法

在网上，看到大多数用法如下：

“`js

  <li class="item item-checkbox item-checkbox-right">
    <label class="checkbox checkbox-balanced">  
          <input type="checkbox" />  
    </label> 张三
  </li>
  <li class="item item-checkbox item-checkbox-right">
    <label class="checkbox checkbox-balanced">  
                    <input type="checkbox" />  
                </label> 李四
  </li>
  <li class="item item-checkbox item-checkbox-right">
    <label class="checkbox checkbox-balanced">  
         <input type="checkbox" />  
    </label> 王五
  </li>
  <li class="item item-checkbox item-checkbox-right">
    <label class="checkbox checkbox-balanced">  
         <input type="checkbox" />  
    </label> 阿猫
  </li>
  <li class="item item-checkbox item-checkbox-right">
    <label class="checkbox checkbox-balanced">  
         <input type="checkbox" />  
    </label> 阿狗
  </li> ```

效果：

拿出一个item 来看：

     <li class="item item-checkbox item-checkbox-right">
        <label class="checkbox checkbox-balanced">  
            <input type="checkbox" />  
        </label> 阿狗
      </li>

代码行数为五行，使用CSS样式类五个，实现该效果。

下面看下简单写法

   <ion-checkbox class="item item-checkbox item-checkbox-right  checkbox-balanced" ng-repeat="item in peopleList" ng-model="item.checked" ng-checked="item.checked">
        {{ item.userName }}萌萌哒
    </ion-checkbox>

好像不怎么好看，这样

 1.标签 <ion-checkbox> </ion-checkbox>
 2.样式类 class="item item-checkbox item-checkbox-right  checkbox-balanced" 
 3.数据源 ng-repeat="item in peopleList"
 4.绑定 ng-model="item.checked" 
 5.绑定 选择ng-checked="item.checked"

是不是可以看懂了，这里只使用一个html5+标签（注：是ionic1中组件），样式类使用四个，3.、4.、5.可以不看因为这是和数据元有关的东西即使你使用第一种方法，最后与后台数据或者是模拟数据联调时也需要这些写东东。
联调数据：

 function getUsers(userinfo) {
    UsersService.getUsers(userinfo).then(function (res) {
      for (var index in res.data) {
        if (userinfo.userId == res.data[index].userId) {
          res.data[index].checked = true;
        } else {
          res.data[index].checked = false;
        }
      }
      console.info(angular.toJson(res, true))
      $scope.peopleList = res.data;

    })
  }

这里使用模态框承载checkbox列表：

 $ionicModal.fromTemplateUrl('templates/pages/operation/tpl/tpl-people.html', {
    scope: $scope,
    animation: 'slide-in-up',
    backdropClickToClose: true
  }).then(function (modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function () {
    $scope.modal.show();
  };
  $scope.closeModal = function () {
    $scope.modal.hide();
  };
  // Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function () {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function () {
    // console.info(angular.toJson(res, true));
    console.info('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
    console.info($scope.peopleList)
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function () {
    // Execute action
  });

<ion-modal-view>
  <ion-header-bar class="bar-calm">
    <a class="button" ng-click="closeModal();">取消</a>
    <h1 class="title">人员选择</h1>
    <a class="button" ng-click="closeModal();">确认</a>
  </ion-header-bar>
  <ion-content>
    <ion-list>
      <ion-checkbox class="item item-checkbox item-checkbox-right  checkbox-balanced" ng-repeat="item in peopleList" ng-model="item.checked" ng-checked="item.checked">
        {{ item.userName }}
      </ion-checkbox>
    </ion-list>
  </ion-content>
</ion-modal-view>

简写效果：

内容暂且不看，效果一样的一样的！