angular1的复选框指令--checklistModel
这个指令可以改变一组checkbox的model格式,提交的时候格式为[x,y,z,...]
1 var dyDir = angular.module("dyDir", ['']) 15 //复选框指令 16 .directive('checklistModel', ['$parse', '$compile', function ($parse, $compile) { 17 // contains 18 function contains(arr, item, comparator) { 19 if (angular.isArray(arr)) { 20 for (var i = arr.length; i--;) { 21 if (comparator(arr[i], item)) { 22 return true; 23 } 24 } 25 } 26 return false; 27 } 28 29 // add 30 function add(arr, item, comparator) { 31 arr = angular.isArray(arr) ? arr : []; 32 if (!contains(arr, item, comparator)) { 33 arr.push(item); 34 } 35 return arr; 36 } 37 38 // remove 39 function remove(arr, item, comparator) { 40 if (angular.isArray(arr)) { 41 for (var i = arr.length; i--;) { 42 if (comparator(arr[i], item)) { 43 arr.splice(i, 1); 44 break; 45 } 46 } 47 } 48 return arr; 49 } 50 51 // http://stackoverflow.com/a/19228302/1458162 52 function postLinkFn(scope, elem, attrs) { 53 // exclude recursion, but still keep the model 54 var checklistModel = attrs.checklistModel; 55 attrs.$set("checklistModel", null); 56 // compile with `ng-model` pointing to `checked` 57 $compile(elem)(scope); 58 attrs.$set("checklistModel", checklistModel); 59 60 // getter / setter for original model 61 var getter = $parse(checklistModel); 62 var setter = getter.assign; 63 var checklistChange = $parse(attrs.checklistChange); 64 var checklistBeforeChange = $parse(attrs.checklistBeforeChange); 65 66 // value added to list 67 var value = attrs.checklistValue ? $parse(attrs.checklistValue)(scope.$parent) : attrs.value; 68 69 70 var comparator = angular.equals; 71 72 if (attrs.hasOwnProperty('checklistComparator')) { 73 if (attrs.checklistComparator[0] == '.') { 74 var comparatorExpression = attrs.checklistComparator.substring(1); 75 comparator = function (a, b) { 76 return a[comparatorExpression] === b[comparatorExpression]; 77 }; 78 79 } else { 80 comparator = $parse(attrs.checklistComparator)(scope.$parent); 81 } 82 } 83 84 // watch UI checked change 85 scope.$watch(attrs.ngModel, function (newValue, oldValue) { 86 if (newValue === oldValue) { 87 return; 88 } 89 90 if (checklistBeforeChange && (checklistBeforeChange(scope) === false)) { 91 scope[attrs.ngModel] = contains(getter(scope.$parent), value, comparator); 92 return; 93 } 94 95 setValueInChecklistModel(value, newValue); 96 97 if (checklistChange) { 98 checklistChange(scope); 99 } 100 }); 101 102 function setValueInChecklistModel(value, checked) { 103 var current = getter(scope.$parent); 104 if (angular.isFunction(setter)) { 105 if (checked === true) { 106 setter(scope.$parent, add(current, value, comparator)); 107 } else { 108 setter(scope.$parent, remove(current, value, comparator)); 109 } 110 } 111 112 } 113 114 // declare one function to be used for both $watch functions 115 function setChecked(newArr, oldArr) { 116 if (checklistBeforeChange && (checklistBeforeChange(scope) === false)) { 117 setValueInChecklistModel(value, scope[attrs.ngModel]); 118 return; 119 } 120 scope[attrs.ngModel] = contains(newArr, value, comparator); 121 } 122 123 // watch original model change 124 // use the faster $watchCollection method if it's available 125 if (angular.isFunction(scope.$parent.$watchCollection)) { 126 scope.$parent.$watchCollection(checklistModel, setChecked); 127 } else { 128 scope.$parent.$watch(checklistModel, setChecked, true); 129 } 130 } 131 132 return { 133 restrict: 'A', 134 priority: 1000, 135 terminal: true, 136 scope: true, 137 compile: function (tElement, tAttrs) { 138 if ((tElement[0].tagName !== 'INPUT' || tAttrs.type !== 'checkbox') && (tElement[0].tagName !== 'MD-CHECKBOX') && (!tAttrs.btnCheckbox)) { 139 throw 'checklist-model should be applied to `input[type="checkbox"]` or `md-checkbox`.'; 140 } 141 142 if (!tAttrs.checklistValue && !tAttrs.value) { 143 throw 'You should provide `value` or `checklist-value`.'; 144 } 145 146 // by default ngModel is 'checked', so we set it if not specified 147 if (!tAttrs.ngModel) { 148 // local scope var storing individual checkbox model 149 tAttrs.$set("ngModel", "checked"); 150 } 151 152 return postLinkFn; 153 } 154 }; 155 }])
在html页面上使用方法如下:
1 <label><input type="checkbox" name="name" checklist-model="checkbox" checklist-value="1"></label> 2 <label><input type="checkbox" name="name" checklist-model="checkbox" checklist-value="2"></label> 3 <label><input type="checkbox" name="name" checklist-model="checkbox" checklist-value="3"></label>
这样的话,提交时,如果全选中,checkbox的model值为[1,2,3],是不是方便多了。
转载于:https://www.cnblogs.com/souleigh-hong/p/9056098.html
angular1的复选框指令--checklistModel相关推荐
- Vue指令 v-for遍历、下拉列表、单选框、复选框
4 .v-for遍历 4.1 遍历数组中的对象 格式:v-for="item in list" 里面也可以返回下标 格式:v-for="(item.index) in l ...
- 如何使用AngularJS绑定到复选框值列表?
本文翻译自:How do I bind to list of checkbox values with AngularJS? I have a few checkboxes: 我有几个复选框: < ...
- js控制复选框选中显示不同表单_Vue之 表单
阅读本文约需要5分钟 大家好,我是你们的导师,经常看我朋友圈的同学应该知道,我每天会在微信上给大家免费提供以下服务! 1.长期为你提供最优质的学习资源! 2.给你解决技术问题! 3.每天在朋友圈里分享 ...
- vue2.0中ckeckbox(复选框)的使用心得,及对click事件和change的理解
最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...
- vue复选框组件自定义对勾_vue2.0中ckeckbox(复选框)的使用心得,及对click事件和change的理解...
最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...
- el如何获取复选框的值_element ui 表格提交时获取所有选中的checkbox的数据
设定此属性@selection-change="changeFun",意思是每次勾选的时候都会触发这个事件 //复选框状态改变 changeFun(val) { this.mult ...
- vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTM ...
- html 勾选框整体勾选,html勾选框_html5实现表单的复选框验证
摘要 腾兴网为您分享:html5实现表单的复选框验证,中日翻译,携程,悟空识字,天气预报等软件知识,以及寻仙答题器,山东省民生警务平台,买车168,关键词优化精灵,文件拷贝工具,自动壁纸,语音播报软件 ...
- js校验复选框(多选按钮)是否被选中的方法
js校验复选框是否被选中的方法 方法一:(使用下标进行标记) if ($("#checkbox-id")get(0).checked) {// do something } 方法二 ...
- MFC控件编程之复选框单选框分组框
MFC控件编程之复选框单选框分组框 一丶分组框 分组框 英文叫做 GroubBox 添加了分组框主要就是分组.好看.不重点介绍 二丶单选框 英文: Raido Button 单选框需要注意的事项 1. ...
最新文章
- Redis源码解析——字典遍历
- padarray函数
- VMware:为中国中小企业建立“外部云计算”
- Apache Wicket 7.2.0发布
- [Python] L1-036. A乘以B 团体程序设计天梯赛GPLT
- PyTorch中的生成对抗网络(GAN)
- 5阶无向完全图_离散数学图论答案
- 头歌实践平台:机器学习——支持向量回归
- 微信小程序怎么做店铺?
- 笔记本电脑硬件升级-低成本、大幅提升体验
- 在奋斗的日子里,傻笑出来
- 【力扣时间】【825】【中等】适龄的朋友
- mac checkra1n越狱14.0-14.8
- CSharp中的集合与字典:不同数据量的内存占用情况
- 基于kinect v2的模型三维重建算法(个人毕设总结)
- string的使用介绍
- 抖音企业号有什么好处?
- 做大创项目的一点点感悟
- Python:实现gamma 伽玛功能算法(附完整源码)
- java applet 淘汰_java – 替代applet的替代技术?
热门文章
- mysqld restart service 卡_MySQL数据库之mysqld服务启动失败, Failed to restart mysqld.service: Unit not found....
- 学习遗忘曲线_级联相关,被遗忘的学习架构
- 是你渡过人生难关的助力_人工智能将助力安全返回工作场所。 这是如何做
- ubuntu mysql 5.0_ubuntu server 8.04 下的mysql5.0的集群实验
- django 引入同目录下py文件_第 05 篇:Django 的接客之道
- 例4.7 素数 - 九度教程第51题(素数筛法)
- 时钟偏移(Skew)和时钟抖动(Jitter)
- mysql主从不同步监控_MySQL主从同步监控
- android手机导入.cer证书文件的方法
- Maven发布工程到公共库