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. newcoder contest 114 B - 求值2

    记得这是一个组合数卷积的板子题. ∑ C(A,i) * C(B,D-i)   =  C(A+B,D) 然后就直接做了. #include<cstdio> #include<cctyp ...

  2. Android Studio 中修改versionCode跟versionName

    在Android Studio 中修改versionCode 跟versionName最写了一个新版的软件准备发布到应用平台上,但是versionCode和versionName的值一直修改不成功,在 ...

  3. Linux下数组遍历

    声明一个数组变量 直接赋值: array[]=”Zero” array[]=”One” array[]=”Two” declare声明: declare -a array 小括号空格法: array= ...

  4. microsoft visual studio遇到了问题,需要关闭

    http://www.microsoft.com/zh-cn/download/confirmation.aspx?id=13821 装上这个补丁: WindowsXP-KB971513-x86-CH ...

  5. Step by Step 使用HTML5开发一个星际大战游戏(1)

    本系列博文翻译自以下文章 http://blog.sklambert.com/html5-canvas-game-panning-a-background/ Languages: HTML5, Jav ...

  6. eth0: ERROR while getting interface flags: No such device

    出现这个问题有两种原因: 虚拟机设置中没有添加对应的网卡 更改了虚拟机中网卡的MAC,但是Debian 的缓存中将eth0与上次的MAC对应 解决方法: 这里仅就第二种问题提出解决方案: 删除/etc ...

  7. Flexbox兼容性语法汇总

    Flexbox版本 flexbox从第一次出现至今总共有三个语法版本,他们分别是: "display:box;"  —  2009年的老版本 "display:flexb ...

  8. [转]2年SQL Server DBA调优方面总结

      2年SQL Server DBA调优方面总结 当2年dba 我觉得,有些东西需要和大家分享探讨,先书单. 书单 1.<深入解析SQL Server 2008 系列> 这个就是mssql ...

  9. VBA【遍历每个工作表并将工作表表名赋予B2单元格】

    方法一:  存在缺陷:选中所有单元格,批量生成公式时候,每次需要点击进入工作表点击单元格--进入编辑状态,然后公式才会生效 使用公式如下: =,) 附件下载地址:点击下载 方法二: 使用宏编程进行复制 ...

  10. C++/C混合编程

    C与C++混合编程 C++ 是在 C 语言的基础上发展起来的.在某种程度上,我们可将 C++ 看做 C 的一种扩展.在本质上,二者的数据类型和函数调用惯例都是一致的,因此 C 与 C++ 混合编译也是 ...