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. [PKUSC2018]最大前缀和(DP)

    题意:求一个序列随机打乱后最大前缀和的期望. 考场上发现不管怎么设状态都写不出来,实际上只要稍微转换一下就好了. 一个前缀[1..k]是最大前缀,当且仅当前面的所有后缀[k-1,k],[k-2,k], ...

  2. [Codeforces 19E] Fiary

    Brief Intro: 给定一个无向图,询问删去哪条边能使得剩下的图为一个二分图,输出所有结果 Algorithm: 关于二分图的重要性质:一个图为二分图的充要条件为其中没有奇环 1.如果没有奇环, ...

  3. 使用eclipse调试MR程序

    1)点击菜单中的“运行按钮”,然后选择调试配置 2) 3) 这里配置输入路径和输出路径,注意在eclipse上只是在单机模式下Hadoop不会使用HDFS,也不会开启任何Hadoop守护进程,所有程序 ...

  4. [转][译] 分分钟学会一门语言之 Python 篇

    Python was created by Guido Van Rossum in the early 90's. It is now one of the most popularlanguages ...

  5. 微信开发之消息接收与回复--weixin-java-tools

    一.前言 在上一篇文章<微信开发之如何使用开发工具--weixin-java-tools>中我给各位介绍了weixin-java-tools,并且介绍了如何使用weixin-java-to ...

  6. java只有值传递,不存在引用传递

    今天,我在一本面试书上看到了关于java的一个参数传递的问题: 写道 java中对象作为参数传递给一个方法,到底是值传递,还是引用传递? 我毫无疑问的回答:“引用传递!”,并且还觉得自己对java的这 ...

  7. JVM类加载的那些事

    原文出处: 占小狼 前言 Java源代码被编译成class字节码,最终需要加载到虚拟机中才能运行.整个生命周期包括:加载.验证.准备.解析.初始化.使用和卸载7个阶段.   加载 1.通过一个类的全限 ...

  8. 本机搭建PHP环境全教程(图文)

    为了更好的维护空间网站,研究和调试PHP程序,许多人需要在自己的计算机内搭建PHP环境.本文将介绍使用phpnow环境组件搭建的全过程.使用搜索工具,搜索phpnow<ignore_js_op& ...

  9. centos7 iptables和firewalld学习记录

    centos7系统使用firewalld服务替代了iptables服务,但是依然可以使用iptables来管理内核的netfilter 但其实iptables服务和firewalld服务都不是真正的防 ...

  10. OpenGL.Vertex Array Object (VAO) [转]

    http://www.cppblog.com/init/archive/2012/02/21/166098.html 一 OpenGL抛弃glEnable(),glColor(),glVertex() ...