ionic checkbox 精简用法

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

“`js

  

      
            
     张三
  
  

      
                      
                 李四
  
  

      
           
     王五
  
  

      
           
     阿猫
  
  

      
           
     阿狗
  
 ```

效果：

拿出一个item 来看：

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

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

下面看下简单写法

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

简写效果：

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