angular 指令梳理 —— checkBox
checkBox 持久化数据为 逗号分割
/**
* 功能说明:
* htCheckbox 指令用于收集checkbox数据。
* 在页面中使用
* 属性指令:ht-checkbox
* 对应的值为scope对应的数据data.users=“1,3”。
* 示例:
<div >
<input type="checkbox" ht-checkbox ng-model="data.users" value="1" />红
<input type="checkbox" ht-checkbox ng-model="data.users" value="2" />绿
<input type="checkbox" ht-checkbox ng-model="data.users" value="3" />蓝
<span>{{data.users}}</span>
</div>
*/
.directive('htCheckbox', [ function() {
return {
restrict : 'A',
require : "ngModel",
link : function(scope, element, attrs, ctrl) {
var checkValue = attrs.value; //modelValue转viewValue的过程
ctrl.$formatters.push(function(value) {
if (!value) return false; var valueArr = value.split(",");
if (valueArr.indexOf(checkValue) == -1) return false; return true;
}); //viewValue转modelValue的过程
ctrl.$parsers.push(function(value) {
var valueArr = [];
if(ctrl.$modelValue){
valueArr = ctrl.$modelValue.split(",");
}
var index = valueArr.indexOf(checkValue);
if (value) {
// 如果checked modelValue 不含当前value
if (index == -1) valueArr.push(checkValue);
} else {
if (index != -1) valueArr.splice(index, 1);
} return valueArr.join(",");
});
}
}
}])
angular 指令梳理 —— checkBox的更多相关文章
- angular 指令梳理 —— 前端校验
angular js内置校验的扩展 校验成功则 scope.formName.$valid=true 校验失败 元素的class: ng-invalid 成功:.ng-valid /** * 校验指 ...
- Angular指令渗透式理解
通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...
- angular指令深度学习篇
angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...
- Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证
最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...
- angular指令之complie和link不得不说的故事
angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚.当理解了指令的真正编译原理的时候,就会发现这相当的简单. ng怎 ...
- angular指令大全
这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 ...
- angular 指令 要点解析
指令可以删繁就简前端的js代码,杜绝重复的js代码和html代码. 下面就对指令的重要属性进行罗列 一.restrict = 'AECM' 分别指该指令标识位于 attribute属性: < ...
- angular学习笔记02 angular指令大全
第一步 先要引入angular, 第二步 在 html 标签中<html ng-app> 加入ng-app(这是个必须的,不然会报错) 接下来就可以去使用angular的各种指令了. ...
- angular指令中使用ngModelController
在这篇文章中 angular学习笔记(三十)-指令(10)-require和controller 说到了通过require属性和controller参数来让指令与指令之间互相交互. 本篇主要介绍的是指 ...
随机推荐
- SQL存储过程笔记
一.概述 存储过程(Stored Procedure)是一组为了完成特定功能的SQL 语句集,经编译后存储在数据库.用户通过指定存储过程的名字并给出参数(如果该存储过程带有参数)来执行它. 优点: ...
- Emoji表情在网页中显示
最近遇到一个项目,客户手机上发送的表情要在电脑网页中显示,没有找到简便方法,于是有了以下方案. 由于Emoji表情传到后台是“口”,怎么找出接收数据中的表情是关键,各种搜索后,我用下面的正则表达式匹配 ...
- SignalR2.0开发实例之——设置时间、后台其他地方使用集线器、使用自己的连接ID
一.连接的生命周期设置: 如下: // 该值表示连接在超时之前保持打开状态的时间长度. //默认为110秒 GlobalHost.Configuration.ConnectionTimeout = T ...
- [c#]控制台进度条的示例
看到[vb.net]控制台进度条的示例 感觉很好玩,翻译成C#版. using System; using System.Collections.Generic; using System.Linq; ...
- static静态类与非静态类的区别
static静态类与非静态类的区别 1.在非静态类中可以有实例成员也可以有静态成员 2.在调用的时候需要使用对像名.实例成员调用(先要实例化,如person ps=new person(); ps. ...
- Java Se 基础系列(笔记) -- OO
记录所学到的关于Java Se的一些基础知识 1.对象是通过“属性(成员变量)”和“方法”来分别对应事物所具有的静态属性和动态属性 2.类(Class)是对某一类事物的抽象,对象(Object)为某个 ...
- php 之 房屋租赁练习(0509)
做出以下页面并实现其对应的功能: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- C语言的画图(圆形动画)
#include <stdio.h> #include <malloc.h>#include<graphics.h> #define LEN sizeof(stru ...
- append与remove的简单使用
点击Add More按钮页面会自动添加一个输入框和Remove按钮,点击Remove按钮则此行元素将被移除. <!DOCTYPE html> <html lang="en& ...
- form 和 ngModel
参考 https://docs.angularjs.org/api/ng/type/ngModel.NgModelController https://docs.angularjs.org/api/n ...