AngularJS自定义表单控件
<!doctype html>
<html ng-app="myApp">
<head>
<script src="G:\\Source\\Repos\\GWD\\Gridsum.WebDissector.Website.ZC\\Gridsum.WebDissector.Website.ZC\\Pages\\dist\\assets\\lib\\angularjs\\angular.js"></script>
<script type="text/javascript">
angular.module('myApp', []).directive('contenteditable', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
// view -> model
elm.bind('blur', function () {
scope.$apply(function () {
ctrl.$setViewValue(elm.html());
});
});
// model -> view
ctrl.$render = function (value) {
elm.html(value);
};
// load init value from DOM
ctrl.$setViewValue(elm.html());
}
};
});
</script>
</head>
<body>
<div contenteditable="true" ng-model="content" title="Click to edit">Some</div>
<pre>model = {{content}}</pre>
<style type="text/css">
div[contentEditable] {
cursor: pointer;
background-color: #D0D0D0;
}
</style>
</body>
</html>
AngularJS自定义表单控件的更多相关文章
- Angular19 自定义表单控件
1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...
- angular 响应式自定义表单控件—注册头像实例
1. 组件继承ControlValueAccessor,ControlValueAccessor接口需要实现三个必选方法 writeValue() 用于向元素中写入值,获取表单的元素的元素值 regi ...
- Angular：自定义表单控件
分享一个最近写的支持表单验证的时间选择组件. import {AfterViewInit, Component, forwardRef, Input, OnInit, Renderer} from & ...
- MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件
类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...
- Vue.js学习笔记——表单控件实践
最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...
- C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件（Form Controls） C#串口通信程序
C#中缓存的使用 缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可: <%@ Outp ...
- 认识HTML中表格、列表标签以及表单控件
前端之HTML,CSS(二) HTML标签 列表标签 无序列表:闭标签,由<ul><li></li>...</ul>组合而成,效果成纵向列表.格式:&l ...
- 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML入门（列表、表单、常用表单控件、浮动框架、iframe、 摘要与细节、度量标签）
一.列表 1.作用:默认显示方式为从上到下的显示数据 2.列表的组成 列表类型和列表项 3.列表的分类:有序列表 无序列表 自定义列表 无序列表语法为ul>li, 语法:ul代表列表,l ...
随机推荐
- QT 让窗口（或控件）居中
代码如下: XXX::XXX(QWidget *parent /* = 0 */) { .................. //注意,resize一定要放在这段代码的前面 resize(300, 3 ...
- 9.21 investments - chapter 4 - Summary
转载请注明来自souldak,微博:@evagle MUTUAL FUNDS AND OTHER INVESTMENT COMPANIES KEYWORDS: investment company n ...
- 二叉树后序遍历的非递归算法(C语言)
首先非常感谢‘hicjiajia’的博文:二叉树后序遍历(非递归) 这篇随笔开启我的博客进程,成为万千程序员中的一员,坚持走到更远! 折磨了我一下午的后序遍历中午得到解决,关键在于标记右子树是否被访问 ...
- IMS 相关名词解释
IMS: IMS(IP Multimedia Subsystem)是IP多媒体系统,是一种全新的多媒体业务形式,它能够满足现在的终端客户更新颖.更多样化多媒体业务的需求. RCS:Rich Commu ...
- linux patch
作为程序员,了解diff&patch命 令是非常必要的.比如说我们发现某个项目有bug代码,而自己又没有svn的提交权限,那么此时最合适的解决方法就是用diff命令做一个补丁发给项目成 员.项 ...
- Apache HttpClient组件封装工具类
package com.mengyao.spider.utils; import java.util.ArrayList;import java.util.HashMap;import java.ut ...
- 查询死锁和处理死锁(SqlServer)
-------------------查询死锁,极其引起的原因-------------------------------use master go create procedure sp_who_ ...
- Linux查找yum安装软件在系统中路径
find文件查找http://www.ruanyifeng.com/blog/2009/10/5_ways_to_search_for_files_using_the_terminal.html
- java-下载excel
在java程序里面处理excel,我觉得比较方便的方式是先做出一个excel的模板(比如定义表头信息.表格名称等),然后根据这个模板往里面填充数据 我这里演示的是使用poi处理2007以上版本的exc ...
- (转)Linux下Apache 限速模块安装笔记
参考文章:http://www.pcmag.com.cn/solution/net/story/200704/51003104.shtml 限线程:http://dominia.org/djao/li ...