angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom .

作为前端开发而不去操作dom ,这简直是一个玩笑! 没错,确实是这样的.关于 angular.js 的详细说明及事例请在博客搜索 angular.js

既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并且文本框里数据要和控制层一个属性绑定,按钮要实现 ng-click 事件,如何做?

传统实现方法,在父节点里直接新增一段 dom ,html标签的事件也会被自动注册.

angular.js实现方法: 将节点添加到父节点后,我们需要重新编译, 将数组对象 (包含 ng-click 等 angular.js 指令)绑定到当前作用域.绑定以后对应的angular.js 指令才会有效.

前提是:

插入dom节点以后,需要手动调用 $compile 服务(调用前先依赖注入) 才能将 angular.js 指令和模型绑定生效.类似如下代码:

$('div[name=father]').html(
  $compile('<input type="text" ng-model="person.name" /> <input type="input" ng-model="person.age" value="{{person.age}}" /><a ng-show="$index!=0" style="color:red;" ng-click="del($index)">移除</a>'
  )(scope)
);

很明显,没有 $compile 服务,无法将上面插入的dom绑定到当前作用域.但是这种拼串的方式看上去很挫,我们说过 angular.js 是用模型和控制器去实现双向绑定. 这一段不伦不类的 jquery 代码实在有点鹤立鸡群的感觉.

下面简绍第二种方案.

ng-repeat

这是angular.js 的一个迭代指令,如果你之前接触过 asp.net 的话, repeat 控件一定很熟悉吧,他们功能相似,都是从一个集合里,遍历元素然后迭代出来展示在UI上.

你可能有个疑问, 用ng-repeat 迭代出来就能把 angular.js 的事件绑定到当前作用域吗?

是的.

因为 ng-repeat 在实现上就自动执行了 $compile 服务.

这样省事了不少,我们唯一需要关注的是模型.

比如我们用一个数组容器作为迭代数据集 ,比如 var list=[{id:100,age:30,name:"张三"}]

            <div ng-repeat="person in list">
                <input type="text" ng-model="person.name" /> <input type="input" ng-model="person.age" value="{{person.age}}" />
                <a ng-show="$index!=0" style="color:red;" ng-click="del($index)">移除</a>
            </div>
            <a ng-click="add()">增加一个</a>

控制器响应的需要实现 add() 方法 和 del(idx) 方法.

$scope.add=function(){
    var obj={id:101,age:30,name:"李四"};
    $scope.list.push(obj);
} $scope.del=function(idx){
    $scope.list.splice(idx,1);
}

ok,这样我们就可以动态添加 /删除 dom 节点了.

angular.js 动态插入删除dom节点的更多相关文章

  1. angular.js ng-repeat动态插入删除dom节点

    既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...

  2. JS动态增加删除UL节点LI

    JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...

  3. JS动态增加删除UL节点LI及相关内容示例

    <ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);&quo ...

  4. jQuery删除DOM节点

    jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  5. js动态监听dom变化

    原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationO ...

  6. js 动态添加元素 删除元素逻辑

    js 动态添加元素 删除元素逻辑 var obox=document.getElementById("box"); oadd.onclick=function(){ var odi ...

  7. js删除dom节点时候索引出错问题

    我们知道删除一个dom节点的时候索引就会发生了改变,甚至是错误,就算jq的ecah也无能为力,所以我们只能自己写个功能了 直接上代码把,不多说 <!DOCTYPE html> <ht ...

  8. JS中级 - 01:DOM节点

    1元素属性   1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一 ...

  9. js学习总结:DOM节点二(dom基本操作)

    一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...

随机推荐

  1. arcgis python图形信息

    属性 说明 area 面要素的面积值:对于所有其他要素类型为空 centroid 如果质心位于要素之内或要素之上则为真:否则返回标注点(返回一个点对象) 范围 返回一个范围对象 firstPoint ...

  2. windows下用Xshell远程登录Linux

    1.下载安装Xshell 2.右击打开终端,输入su ->口令切换到root 3.查看虚拟机IP 输入命令:ifconfig 若提示not found ,输入/sbin/ifconfig (ex ...

  3. 4 cocos2dx 3.0 源码分析- scheduler

    scheduler 这个类, 负责了引擎的自定义更新, 及定时更新相关的操作, 看看下面的代码,很熟悉吧.   schedule(schedule_selector(HelloWorld::updat ...

  4. js轮播功能 标签自动切换 同页面多轮播js

    需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...

  5. TensorFlowIO操作(二)----读取数据

    读取数据 小数量数据读取 这仅用于可以完全加载到存储器中的小的数据集有两种方法: 存储在常数中. 存储在变量中,初始化后,永远不要改变它的值. 使用常数更简单一些,但是会使用更多的内存,因为常数会内联 ...

  6. java设计模式0--设计模式简介

    设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 设计模式的起源 软件 ...

  7. 值得阅读的C语言开源项目代码

    本文地址:http://www.cnblogs.com/archimedes/p/c-opensource-project.html,转载请注明源地址. 本篇文章主要总结一些C开源项目,有些是很著名的 ...

  8. windows获取本机MAC地址并写入文件的bat

    windows获取本机MAC地址并写入文件的bat MAC(Media Access Control)地址,或称为 MAC地址.硬件地址,用来定义网络设备的位置. bat代码例如以下: @echo o ...

  9. tomcat生产部署关键參数设置

    JVM设置 个节点.每一个tomcat估计处理500个链接,那么连接池的长连接数最大设为2000. 全节点复制(DeltaManager)模式集群节点数3-6为宜. 主备复制(BackupMnagag ...

  10. 使用ASP.NET上传多个文件到服务器

    在Email系统中经常会上传多个文件到服务器,用户大多习惯一次上传所有的文件,而不是逐个上传,我们可以使用javascript动态地添加file元素到表单,然后在服务器端处理这些file 效果图如下: ...