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>

简写效果：

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

ionic checkbox 精简用法相关推荐

checkbox选中用法以及获取未选中的checkbox
一.checkbox选中用法问题:如果一个select的改变事件的选中的值改变,那么相应的复选框也要选中或者取消, $("#isfourfive").change(functio ...
你真的了解checkbox的用法吗？
checkbox的用法一.checked属性定义 1.HTML之 `` 标签的 checked 属性定义和用法 HTML 4.01 与 HTML5之间的差异 HTML 与 XHTML 之间的差异 ...
for循环一种不常见的用法
for(auto &a :b)是for循环的一种精简用法. int arr[10]; for(int i=0;i<10;i++) {arr[i]=i; } for(auto &a ...
《uni-app》表单组件-Checkbox组件
本文分享的checkbox组件为uni-app的内置组件checkbox,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多-没有本质上的区别- <uni-app>表单组 ...
jq 修改swal的标题_js-jquery-SweetAlert【一】使用
一.下载安装地址:http://t4t5.github.io/sweetalert/ 二.页面引用当然还有jquery 三.示例 3.1.基础结构 swal("Here's a mess ...
JQuery 选择器。
• #id • element • .class • .class.cl ...
[转]详解Oracle高级分组函数(ROLLUP, CUBE, GROUPING SETS)
原文地址:http://blog.csdn.net/u014558001/article/details/42387929 本文主要讲解 ROLLUP, CUBE, GROUPING SETS的主要用 ...
oracle 分析函数、GROUPING函数
分析函数 over(Partition by...) 一个超级牛皮的ORACLE特有函数.天天都用ORACLE,用了快2年了.最近才接触到这个功能强大而灵活的函数.真实惭愧啊!oracle的分析函数o ...
Android 应用软件开发（九）控件续
TextView EditBox Button RadioGroup RadioBox CheckBox ProgressBar ListView 下面是关于RadioBox和CheckBox的用法 ...

ionic checkbox 精简用法

下面看下简单写法

ionic checkbox 精简用法相关推荐

最新文章

热门文章