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 ...
随机推荐
- Android系统的进程分类
1.前台进程:即当前正在前台运行的进程,说明用户当前正在与通过该进程与系统进行交互,所以该进程为最重要的进程,除非系统的内容已经到不堪重负的情况,否则系统是不会将改进程终止的.2.可见进程:一般还是显 ...
- MFC新婚之夜（笑昏，大概是指MFC的人固步自封）
请问学会MFC都要学些什么呢?DOC-VIEW,OLE,UI线程,泵,钩,还是堆,栈内存分配与回收的机制?还是那些各种各样的CHAR,还是__cdecl, __stdcall,PASCAL等等,或者编 ...
- Building Web Apps with SignalR, Part 1
Building Web Apps with SignalR, Part 1 In the first installment of app-building with SignalR, learn ...
- C# 注销掉事件，解决多播委托链表的问题
c#的事件是多播委托.当绑定多个事件时,事件会依次触发,清除掉注册的委托链表:方法1 C# Code 12345678910111213141516171819202122232425262728 ...
- FILTER的执行次数和驱动表问题
drop table test1; create table test1 as select * from dba_objects where rownum<1000; drop table t ...
- Linux系统编程（35）—— socket编程之TCP服务器的并发处理
我们知道,服务器通常是要同时服务多个客户端的,如果我们运行上一篇实现的server和client之后,再开一个终端运行client试试,新的client就不能能得到服务了.因为服务器之支持一个连接. ...
- <WinForm_1>初识WinForm编程
暑假花了一个多月自学了Win32 SDK编程,不敢说成为了高手,但是还是颇具收获——windows的消息机制(著名的消息循环).一切控件均是窗口…… 曾经有一位网友(和我一个专业的)向我吐槽:Win3 ...
- javascript 倒计时天、小时、分钟、描述的倒计时代码
调用方法 var _TimeCountDown = new TimeCountDown("sttime1",{ startTime:'2016-07-30 10:07:55', / ...
- 对Ul下的li标签执行点击事件——如何获取你所点击的标签
问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了. 例如:点谁就显示谁的数值 <ul > <li id=& ...
- UE4学习笔记(三): 为什么使用C++替代UnrealScript?
原文链接: https://forums.unrealengine.com/showthread.php?2574-Why-C-for-Unreal-4&p=16252&viewful ...