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. 工作流Activiti新手入门学习路线整理

    写在前面: 最近项目中使用到了工作流,虽然此部分不是自己需要完成的,但是也涉及到了要调用写的接口.正好有时间,就了解下,以便之后能在其他项目中用到时,不至于什么都不知道什么都不了解. 这里就主要整理下 ...

  2. Mybatis全部标签

    一.定义SQL语句 (1)select 标签的使用 属性介绍: id :唯一的标识符. parameterType:传给此语句的参数的全路径名或别名 例:com.test.poso.User或user ...

  3. NSPredicate 谓词总结 数组过滤 模糊匹配

    NSPredicate 用于指定过滤条件,主要用于从集合中分拣出符合条件的对象,也可以用于字符串的正则匹配. NSPredicate常用方法介绍 1.创建NSPredicate(相当于创建一个过滤条件 ...

  4. FindFirstVolume系列函数遍历驱动器,获取驱动器信息

    什么是“卷”?卷,又称为“逻辑驱动器”,是 NTFS, FAT32 等文件系统组织结构的最高层.卷是存储设备(如硬盘)上由文件系统管理的一块区域,是在逻辑上相互隔离的存储单元.一个磁盘分区至少包含一个 ...

  5. Echart学习

    制表,展示好帮手,自己看官方文档吧,有示例和入门指导 参考:1.http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8% ...

  6. .NET中的CTS、CLS、CLR

    一.解释1 1.CLR(Common Language Runtime) :公共语言运行库 CLR 是CTS(Common Type System:通用类型系统)的实现, 即是说:CLR是应用程序的执 ...

  7. 详解Python中的生成器表达式(generator expression)

    介绍 1.生成器表达式(generator expression)也叫生成器推导式或生成器解析式,用法与列表推导式非常相似,在形式上生成器推导式使用圆括号(parentheses)作为定界符,而不是列 ...

  8. Spark(十二) -- Spark On Yarn & Spark as a Service & Spark On Tachyon

    Spark On Yarn: 从0.6.0版本其,就可以在在Yarn上运行Spark 通过Yarn进行统一的资源管理和调度 进而可以实现不止Spark,多种处理框架并存工作的场景 部署Spark On ...

  9. sqoop操作与使用

    sqoop只要安装到集群中的一台节点就可以了 1.上传sqoop到节点中 2.安装和配置 在添加sqoop到环境变量到/etc/profile中 将数据库连接驱动拷贝到$SQOOP_HOME/lib里 ...

  10. Netty源码细节IO线程(EventLoop)(转)

    原文:http://budairenqin.iteye.com/blog/2215896 源码来自Netty5.x版本, 本系列文章不打算从架构的角度去讨论netty, 只想从源码细节展开, 又不想通 ...