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 ...
随机推荐
- weblogic使用脚本部署
--本机 (/common/bin/wlst.sh (2)connect('weblogic','weblogic1','t3://localhost:7001') (3)progress=deplo ...
- C/C++跨平台的的预编译宏
我们在编译一些跨平台的程序的时候难免会遇到_WIN32 __linux__什么之类的SDK或者编译器环境预定义的宏.有很多,之前还分不清_WIN32 和WIN32的区别.不过这里还好有个列表,做个备 ...
- Linux系统编程（31）—— socket编程之TCP详解
TCP有源端口号和目的端口号,通讯的双方由IP地址和端口号标识.32位序号.32位确认序号.窗口大小稍后详细解释.4位首部长度和IP协议头类似,表示TCP协议头的长度,以4字节为单位,因此TCP协议头 ...
- Best Time to Buy and Sell Stock IV 解答
Question Say you have an array for which the ith element is the price of a given stock on day i. Des ...
- sicily 1035. DNA matching
题意:判断基因链是否匹配,匹配的双链数加1,并要标记,下次比较不能重用! 解法: 打擂台法 #include<iostream> #include<string> #inclu ...
- POI操作Excel2007实例二之“SXSSFWorkbook”处理海量数据
转自:http://blog.csdn.net/little_stars/article/details/8266262 前文讲述了 POI 读取的基本操作,但后期 经过试验,当写入数据量超过5万条以 ...
- Scala-数组
package com.mengyao.scala.function /** * Scala中数组的声明和使用(定长数组和变长数组) * * @author mengyao */object Tes ...
- Hadoop-2.x的源码编译
由于在Hadoop-2.x中,Apache官网上提供的都是32位版本,如果是生产环境中则需要自行编译64位,编译Hadoop-2.x版本方法如下: 安装编译源码所依赖的底层库 yum install ...
- 司机福利！Uber即将可以自己选目的地接单啦！
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- [置顶] API相关工作过往的总结之整体介绍
此系列的总结文章,仅仅是我个人工作总结,有考虑不周之处还请各位同行多多指教. API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是 ...