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. 前端基础-HTML简介及发展史

    一 HTML简介 二 HTML发展史 一. HTML简介 用户使用浏览器打开网页看到结果的过程就是:浏览器将服务端的文本文件(即网页文件)内容下载到本地,然后打开显示的过程. 而文本文件的文档结构只有 ...

  2. 1.1(学习笔记)Servlet简介及一个简单的实例

    一.Servlet简介 Servlet是使用Java语言编写的服务器端程序,可以生产动态的Web界面. 主要运行在服务器端,Servlet可以方便的处理客户端传来的HTTP请求,并返回一个响应. 二. ...

  3. SQL Server on Linux: How? Introduction: SQL Server Blog

    SQL Server Blog Official News from Microsoft’s Information Platform https://blogs.technet.microsoft. ...

  4. MediaInfo用来分析视频和音频文件的编码和内容信息的超好用工具

    转载:http://blog.csdn.net/ameyume/article/details/6718705 MediaInfo简介 MediaInfo 用来分析视频和音频文件的编码和内容信息. M ...

  5. RabbitMq_05_Topics

    Topics (using the .NET client) Prerequisites This tutorial assumes RabbitMQ isinstalled and running ...

  6. cdev结构体及其相关函数

    一.在Linux2.6内核中一个字符设备用cdev结构来描述,其定义如下: struct cdev { struct kobject kobj; struct module *owner; //所属模 ...

  7. numpy基础知识

    官网简介: http://www.numpy.org/ ndarry基本属性 ndarry是Numpy中的N维数组对象(N dimentional arrya,ndarray) ndarry中所有的元 ...

  8. 《深入理解Java虚拟机》笔记2

    都知道Java对内存是自动垃圾回收的,什么样的内存是可以回收的? 这个问题是值得思考的. 对象已死的判定方法有两种: (1)引用计数器法 给对象添加一个引用计数器,有一个地方用到此对象,计数器加一. ...

  9. 删除Kafka中topic

    步骤: 1.编辑Kafka启动时加载的配置文件server.properties,添加一行:delete.topic.enable=true 2.重启Zookeeper和Kafka 3.执行: ./b ...

  10. 2017.11.15 linux软件安装管理(todo)

    学习来自:http://www.imooc.com/learn/447 第一章 介绍 第二章 软件包简介 1.源码包 2.二进制包(RPM包或系统默认包) 脚本安装包其实是别人把软件安装的脚本写好了, ...