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 ...
随机推荐
- java.io.FileNotFoundException: /exapp/hadoop/name/current/VERSION (Permission denied)
http://blog.csdn.net/blackiez/article/details/8570395
- ural 1106 Two Teams
http://acm.timus.ru/problem.aspx?space=1&num=1106 #include <cstdio> #include <cstring&g ...
- Altium Designer 里面怎么画等长线
(1)一般是将走线布完后,新建一个class. Design -> Classes 如上图添加完后可以点击close. (2)快捷键 T + R: 或者 点击Tools 下拉中的Interact ...
- 8.2.1.10 Nested-Loop Join Algorithms 嵌套循环 关联算法:
8.2.1.10 Nested-Loop Join Algorithms 嵌套循环 关联算法: MySQL 执行关联在表之间使用一个嵌套循环算法或者变种 Nested-Loop Join Algori ...
- win7 共享
1.取得IP 3. 输入 用户名 和密码就可以了
- Java---设计模块（设计模块的简介及最简单的俩个单例代码加测试）
设计模式学习概述: ★ 为什么要学习设计模式 1.设计模式都是一些相对优秀的解决方案,很多问题都是典型的.有代表性的问题,学习设计模式,我们就不用自己从头来解决这些问题,相当于在巨人的肩膀上,复用这些 ...
- Java---设计模块(值对象)
★ 场景和问题 在Java开发时,需要来回交换大量的数据,比如要为方法传入参数,也要获取方法的返回值,该如何能更好的进行数据的交互? ★ 基本的编写步骤 ◎第1步:写一个类,实现可序列化(如果以后数据 ...
- js 等待刷新技术
- Ajax请求用户控件（.ascx）404错误
- (转)How to renew your Apple Push Notification Push SSL Certificate
转自:https://blog.serverdensity.com/how-to-renew-your-apple-push-notification-push-ssl-certificate/ It ...