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是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- JVM加载Class文件的机制
1.Java中的所有类,必须被装载到jvm中才能运行,这个装载工作是由jvm中的类装载器完成的, 类装载器所做的工作实质是把类文件从硬盘读取到内存中 2.java中的类大致分为三种: 1.系统 ...
- Codechef ForbiddenSum
Mike likes to invent new functions. The latest one he has invented is called ForbiddenSum. Let's con ...
- [Contest20180316]Mythological IV
令$S(n)=\sum\limits_{i=0}^{n-1}f(i)q^i$,那么存在一个次数$\leq k$的多项式使得$S(n)=q^ng(n)-g(0)$(证明来自杜教的PPT) 设$f$的次数 ...
- 通读《STL源码剖析》之后的一点读书笔记
直接逼入正题. Standard Template Library简称STL.STL可分为容器(containers).迭代器(iterators).空间配置器(allocator).配接器(adap ...
- Mapper动态代理开发
在开发的过程中只需要写Dao层的借口,无需写其实现类,实现类有框架自己补充. 框架是根据mapper文件自动补充的,因此需要满足下面四个条件 Mapper接口开发需要遵循以下规范: Mapper.xm ...
- jvm-监控指令-jstat
格式: jstat -<option> <vmid> [<interval> [<count>]] 作用: 查看虚拟机各种运行状态信息. ...
- 网络采集软件核心技术剖析系列(6)---将任意博主的全部博文下载到SQLite数据库中并通过Webbrower显示(将之前的内容综合到一起)
一 本系列随笔目录及本节代码下载 自己开发的豆约翰博客备份专家软件工具问世3年多以来,深受广大博客写作和阅读爱好者的喜爱.同时也不乏一些技术爱好者咨询我,这个软件里面各种实用的功能是如何实现的. 该软 ...
- chrome 技巧 记录一些以前不太熟悉的
chrome已经不知道用了多少年了,但是还是有些技巧不熟悉,记录下有用的和自己不熟悉的 如何查看dom的绑定事件(查看jquery的绑定事件) 新版本的network的类型选项哪去了? 在Source ...
- 【算法导论C++代码】归并排序
一个归并排序卡了一天最后还是归并算法有问题,最初是为了把算法导论的伪代码转到c++而加了一些东西,其中在对左右数组的赋值那里出了问题.因为进行测试时不完全,就是只用书上的数组进行测试时,归并算法部分还 ...
- ajax不运行success回调而是运行error回调
调试代码遇到一个问题,就是前台运行删除操作后,controller返回数据,但前台接收时,ajax不运行success回调,总是弹出失败的对话框.接收数据类型是json. 先看看我的前台代码. if ...