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是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- n2n搭建手记-2-V2
n2n-V2搭建 [1.]在V1中遇到的问题 在完成V1搭建后,边缘节点1台机器由centos 6.5 重装为Centos 7 ,再次重加入V1时遇到 与节点其他机器 可 ping通.能通过机器的公网 ...
- [P2397] yyy loves Maths VI (mode)
Link: P2397 传送门 Solution: (1)在这里记录一个小小的黑科技:摩尔投票法 (线性时间复杂度,$O(1)$的空间复杂度求众数) 从数组的第一个元素开始,假定它代表的群体的人数是最 ...
- [BZOJ 4720] 换教室
Link: BZOJ 4720 传送门 Solution: 2016年$NOIP$考的一道语文题 题面虽长,但思路并不难想 对于这类期望问题,大多数时候都用期望$dp$来解决 根据询问:在$n$个时间 ...
- 【带修莫队】【权值分块】bzoj3196 Tyvj 1730 二逼平衡树
这题用了三种算法写: 分块+二分:O(n*sqrt(n*log(n)) 函数式权值分块:O(n*sqrt(n)) 带修莫队+权值分块:O(n5/3) 结果……复杂度越高的实际上跑得越快……最后这个竟然 ...
- Problem K: 数字菱形
#include<stdio.h> int main() { int n,i,j,k,t,x,q,p; while(scanf("%d",&n)!=EOF) ; ...
- 图像视图-ImageView
(一) 知识点: (1)imageView.setImageAlpha(Alpha):设置图片透明度 (2)在布局imageView中设置图片位置:android:scaleType="ce ...
- 修复XCode7 Beta版无法使用iOS8.4真机调试的Bug
在XCode7 Beta2下如果使用iOS8.4版的真机进行调试,XCode会提示: "Could not find Developer Disk Image" 解 ...
- 【JVM】Myecplise自带的JVM大小调整,用于Junit等测试时使用
一般在使用Junit或者一个工具类的main方法执行时,在Myecplise中运行,并不会占用多大的堆空间.如果出现OutofMemory错误,调整MyEcplise自带的JVM大小. 在Myecpl ...
- ubuntu ufw防火墙简易教程(转)
ufw是一个主机端的iptables类防火墙配置工具,比较容易上手.一般桌面应用使用ufw已经可以满足要求了. 安装方法 sudo apt-get install ufw 当然,这是有图形界面的(比较 ...
- oracle 10g函数大全--聚合函数
AVG([distinct|all]x) [功能]统计数据表选中行x列的平均值. [参数]all表示对所有的值求平均值,distinct只对不同的值求平均值,默认为all 如果有参数distinct或 ...