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. 10.2(java学习笔记)JDBC事务简述

    一.事务 事务是指作为一系列操作组成的一个整体,该整体只有两种状态,要么全部执行,要么全部不执行. 当组成这个事务的所有语句都执行成功则该事务执行,只要有一条语句执行失败则该事务不执行. 假设这里有一 ...

  2. 从cmd连接mysql数据库控制台

    在cmd中进入mysql安装目录的bin目录然后执行命令 mysql -uuser -ppassword database比如用户名为root,密码为mysql,数据库为test命令如下mysql - ...

  3. oracle表空间操作语句

    1.查看所有表空间及表空间大小: select tablespace_name ,sum(bytes) / 1024 / 1024 as MB from dba_data_files group by ...

  4. powerbuilder webbrowser 内嵌浏览器 select下拉框无法使用

        Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MA ...

  5. iOS 常用的#define合集

    1.定义常量 定义常量的时候最好以小写字母k开头,让人见名知意, (1)导航栏高度:我们都知道iPhone竖屏时候导航栏的高度为44,这时候可以定义一个常量来表示该高度, #define kNaivg ...

  6. [Git] git merge和rebase的区别

    git merge 会生成一个新得合并节点,而rebase不会 比如: D---E test / A---B---C---F master 使用merge合并, 为分支合并自动识别出最佳的同源合并点: ...

  7. flask-assets使用介绍

    作用:对css.js静态文件进行打包,打包成一个文件,然后去除文件里的换行.空行等进行压缩: 而且 Flask-Assets 还会使用特定的 HTTP Response Header, 让浏览器缓存这 ...

  8. smokeping网络监控

    一.smokeping介绍 我们在选择机房的时候,如何知道这个机房的网络情况,这个时候就要用到网络监控软件:smokeping 本文主要介绍如何使用smokeping来监控idc机房的网络质量情况,从 ...

  9. Less 简介

    什么是LESSCSS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. LE ...

  10. Java笔记6:多态

    一.多态的分类对象的多态性:动物 x = new 猫();函数的多态性:函数重载.重写 二.多态的体现父类的引用指向了自己的子类对象父类的引用也可以接收自己的对象 三.多态的前提必须是类与类之间只有关 ...