Angularjs学习笔记2_添加删除DOM元素
1.调用element方法
angular.element(html) 把字符串或dom对象转化成一JQuery对象, angular.element(document.getElementById("control")).append(newHtml); 在id为control<div>元素里内添加新对象,新对象在添加前需$compile编译过 <div ng-controller="c10_1" class="frame" id="control">
<button ng-click="add()">添加元素</button>
<button ng-click="del()">删除元素</button>
</div>
<script type="text/javascript">
angular.module('a10_1', [])
.controller('c10_1', function ($scope, $compile) {
$scope.hello = 'Hello,Angular!';
$scope.log = function() {
console.log('这是动态添加的方法!');
}//添加元素及其对象方法加变量
var html = "<div ng-click='log()'>{{hello}}</div>";
var template = angular.element(html);
var newHtml = $compile(template)($scope);
$scope.add = function () {
angular.element(document.getElementById("control")).append(newHtml);
}
$scope.del = function () {
if (newHtml) {
newHtml.remove();
}
}
});
</script>
2.使用ng-show
待续
Angularjs学习笔记2_添加删除DOM元素的更多相关文章
- DOM学习笔记(三)DOM元素的访问、修改与事件
访问 HTML 元素等同于访问节点,使用的是document对象下的数个getElement方法,然后再对返回的元素(或元素列表)进行具体内容的访问和修改,或者响应对应的事件是操作 一些 DOM 对象 ...
- ztree : checkbox 选中/不选中时动态添加/删除DOM元素
先上代码. var IDMark_Switch = "_switch", IDMark_Icon = "_ico", IDMark_Span = "_ ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- luogu P2134 百日旅行
题目链接 luogu P2134 百日旅行 题解 dp方程好想吧 优化有些玄学惹 不会证.... 不过我会三分和贪心 \滑稽 但还是写dp吧 代码 #include<cstdio> #in ...
- 最小割分治(最小割树):BZOJ2229 && BZOJ4519
定理:n个点的无向图的最小割最多n-1个. 可能从某种形式上形成了一棵树,不是很清楚. 最小割分治:先任选两个点求一边最小割,然后将两边分别递归,就能找到所有的最小割. 这两个题是一样的,直接搬din ...
- 5.8 Properties
一.Propertie 主要用于读写资源配置文件. Properties继承自Hashtable. 我们来看下HashMap和Hashtable的区别: Hashtabl 线程安全, 同步, ...
- C语言计算器
地址: https://wenda.so.com/q/1371173683061754?src=140
- hadoop FileSplit
/** A section of an input file. Returned by {@link * InputFormat#getSplits(JobContext)} and passed t ...
- Delphi Delay 延时计数的功能。 下面的方法都是思路,但是没有用在项目上
procedure Tfrm_InstrumentControl.aa;var CurLength: Word; vTimeLength: Word;begin Screen.Cursor := cr ...
- 使用CSS实现自定义input[checkbox]样式
思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...
- 还原数据库完整sq语句l
use master go declare @dbname varchar ( 20) set @dbname = 'QADB' declare @sql nvarchar ( 500) declar ...
- WebLogic Server的密码复杂性规则设置
WebLogic Server默认的密码复杂性规则是长度为8位以上,必须包含数字和字母,但对于很多企业的安全而言是不足够的,因此WebLogic Server在Security模块中提供了Passwo ...
- 鸟哥的linux私房菜服务器架设篇学习记录之进修专区与架设服务器的准备工作