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是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- 算法-基数排序(radix sort)
本文由@呆代待殆原创,转载请注明出处. 简介:这个排序是原来用在卡片排序机上的一个算法,一般用来比较具有多对关键字域的记录,如日期(年月日),通过基数排序我们会依次对年月日这三个关键字进行排序,只要对 ...
- 网站模糊测试爆破工具Wfuzz
网站模糊测试爆破工具Wfuzz 模糊测试爆破使用模糊测试的方式对HTTP请求中的各个参数同时进行猜测爆破.例如,渗透测试人员可以采用不同的HTTP请求方式来访问由字典生成的网页路径,以判断网页目录 ...
- mysql使用default来设置字段的默认值
mysql创建表时,我们可以使用default来设置表字段的默认值,这样当向表中插入或添加数据时,如果没有为此字段设置任何值,则使用default默认值来填充该字段的值 在使用create table ...
- [Contest20180328]同构
我们先把两棵树的所有节点的儿子排序,然后dfs,记录访问的深度序列 然后可以发现题目中的两个操作都只会在深度序列中删掉一位,不会对其他位有影响(自己画画图就知道了) 对于一个深度序列$d_{1\cdo ...
- 5.7(java学习笔记)Vector、Enumeration
一.Vector Vector类实现一个可扩展的数组对象.与数组一样,它包含可以使用整数索引访问. 它的基本操作方法add(int index, E element),get(int index),i ...
- java的classpath和path理解
1)classpath即是类路径的意思,后缀为.java的源程序编译成功之后会生成后缀为.class的类文件.classpath与import关键字是相关的,程序编译的时候,遇到import关键字,编 ...
- linux-磁盘目录使用情况-df/du
1. df -h 查看磁盘使用情况 2. du -h --max-depth=1 查看各文件夹大小 3. sudo du -k --max-depth=1 | sort -k 1 -n -r ...
- Android之startActivityForResult
作用:当aAty跳转之bAty时,需要bAty回传数据,使用startActivityForResult. 相关的函数: aAty:--跳转至bAty(intent可以传递数据) void andro ...
- Linux防止“rm -rf /”误删除
说明:不解释了,运维应该在每台服务器都去配置这个问题以减少灾难的发生 方法: 1.safe-rm safe-rm是一个开源软件用来替代不太安全的rm,可以在/etc/safe-rm.conf中配置路径 ...
- 打算安装个Ubuntu双系统,遇到了些基本概念问题(主分区、活动分区、扩展分区、逻辑分区)
和运维的同事聊天,了解到: 1.XP系统时代(老的硬盘分区形式和分区表),最多允许建4个“主分区”,为了解决这个限制,就有了“扩展分区”的概念: 2.在“扩展分区”上,我们就可以建很多的“逻辑分区”, ...