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. 用Python处理邮件,全文完

    http://www.chinaunix.net/old_jh/55/575710.html

  2. [BZOJ5461][LOJ#2537[PKUWC2018]Minimax(概率DP+线段树合并)

    还是没有弄清楚线段树合并的时间复杂度是怎么保证的,就当是$O(m\log n)$吧. 这题有一个显然的DP,dp[i][j]表示节点i的值为j的概率,转移时维护前缀后缀和,将4项加起来就好了. 这个感 ...

  3. POJ 3532 Resistance(高斯消元+基尔霍夫定理)

    [题目链接] http://poj.org/problem?id=3532 [题目大意] 给出n个点,一些点之间有电阻相连,求1~n的等效电阻 [题解] 有基尔霍夫定理:任何一个点(除起点和终点)发出 ...

  4. 【2-SAT】Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) D. Innokenty and a Football League

    先反复地扫(不超过n次),把所有可以确定唯一取法的给确定下来. 然后对于剩下的不能确定的,跑2-SAT.输出可行解时,对于a和¬a,如果a所在的强连通分量序号在¬a之前,则取a,否则不取a.如果a和¬ ...

  5. 【后缀数组】poj3693 Maximum repetition substring

    sa在清空方面存在一些奇怪的问题……难以ac.(留坑?)

  6. 1.4(Spring学习笔记)Spring-JDBC基础

    一.Spring JDBC相关类 1.1 DriverManagerDataSource DriverManagerDataSource主要包含数据库连接地址,用户名,密码. 属性及含义如下配置所示: ...

  7. android中使用gdbserver调试c程序

    先废话两句,这篇文章可能有所缺陷,因为我并没有条件去测试动态库的调试.(主要是因为是自己的手机不想乱放各种so) 所以我只能说有空的话我会去进行下测试,这里就先这样了. 1.测试代码gdb-test. ...

  8. JavaScript的map循环、forEach循环、filter循环、reduce循环、reduceRight循环

    1.map循环 let arr=[1,2,3,4]; arr.map(function(value,key,arr){ //值,索引,数组(默认为选定数组) return item; //如果没有re ...

  9. Coherence的NameService

    Coherence*Extend模式下客户端需要连接一个或多个proxy Server从而接入集群,在一些比较大型的环境中,Proxy Server往往比较多,一旦修改起来需要修改每个配置文件,在Co ...

  10. 字符串去重(hashSet)

    public static String deleteRepeat(String strn){          String s=strn;        String[] array = s.sp ...