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元素的更多相关文章

  1. DOM学习笔记(三)DOM元素的访问、修改与事件

    访问 HTML 元素等同于访问节点,使用的是document对象下的数个getElement方法,然后再对返回的元素(或元素列表)进行具体内容的访问和修改,或者响应对应的事件是操作 一些 DOM 对象 ...

  2. ztree : checkbox 选中/不选中时动态添加/删除DOM元素

    先上代码. var IDMark_Switch = "_switch", IDMark_Icon = "_ico", IDMark_Span = "_ ...

  3. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  4. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  5. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  6. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

随机推荐

  1. 算法-基数排序(radix sort)

    本文由@呆代待殆原创,转载请注明出处. 简介:这个排序是原来用在卡片排序机上的一个算法,一般用来比较具有多对关键字域的记录,如日期(年月日),通过基数排序我们会依次对年月日这三个关键字进行排序,只要对 ...

  2. 网站模糊测试爆破工具Wfuzz

    网站模糊测试爆破工具Wfuzz   模糊测试爆破使用模糊测试的方式对HTTP请求中的各个参数同时进行猜测爆破.例如,渗透测试人员可以采用不同的HTTP请求方式来访问由字典生成的网页路径,以判断网页目录 ...

  3. mysql使用default来设置字段的默认值

    mysql创建表时,我们可以使用default来设置表字段的默认值,这样当向表中插入或添加数据时,如果没有为此字段设置任何值,则使用default默认值来填充该字段的值 在使用create table ...

  4. [Contest20180328]同构

    我们先把两棵树的所有节点的儿子排序,然后dfs,记录访问的深度序列 然后可以发现题目中的两个操作都只会在深度序列中删掉一位,不会对其他位有影响(自己画画图就知道了) 对于一个深度序列$d_{1\cdo ...

  5. 5.7(java学习笔记)Vector、Enumeration

    一.Vector Vector类实现一个可扩展的数组对象.与数组一样,它包含可以使用整数索引访问. 它的基本操作方法add(int index, E element),get(int index),i ...

  6. java的classpath和path理解

    1)classpath即是类路径的意思,后缀为.java的源程序编译成功之后会生成后缀为.class的类文件.classpath与import关键字是相关的,程序编译的时候,遇到import关键字,编 ...

  7. linux-磁盘目录使用情况-df/du

    1.  df -h   查看磁盘使用情况 2. du -h --max-depth=1  查看各文件夹大小 3.  sudo du -k --max-depth=1 | sort -k 1 -n -r ...

  8. Android之startActivityForResult

    作用:当aAty跳转之bAty时,需要bAty回传数据,使用startActivityForResult. 相关的函数: aAty:--跳转至bAty(intent可以传递数据) void andro ...

  9. Linux防止“rm -rf /”误删除

    说明:不解释了,运维应该在每台服务器都去配置这个问题以减少灾难的发生 方法: 1.safe-rm safe-rm是一个开源软件用来替代不太安全的rm,可以在/etc/safe-rm.conf中配置路径 ...

  10. 打算安装个Ubuntu双系统,遇到了些基本概念问题(主分区、活动分区、扩展分区、逻辑分区)

    和运维的同事聊天,了解到: 1.XP系统时代(老的硬盘分区形式和分区表),最多允许建4个“主分区”,为了解决这个限制,就有了“扩展分区”的概念: 2.在“扩展分区”上,我们就可以建很多的“逻辑分区”, ...