angular.js 动态插入删除dom节点
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节点的更多相关文章
- angular.js ng-repeat动态插入删除dom节点
既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...
- JS动态增加删除UL节点LI
JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...
- JS动态增加删除UL节点LI及相关内容示例
<ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);&quo ...
- jQuery删除DOM节点
jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...
- js动态监听dom变化
原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationO ...
- js 动态添加元素 删除元素逻辑
js 动态添加元素 删除元素逻辑 var obox=document.getElementById("box"); oadd.onclick=function(){ var odi ...
- js删除dom节点时候索引出错问题
我们知道删除一个dom节点的时候索引就会发生了改变,甚至是错误,就算jq的ecah也无能为力,所以我们只能自己写个功能了 直接上代码把,不多说 <!DOCTYPE html> <ht ...
- JS中级 - 01:DOM节点
1元素属性 1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一 ...
- js学习总结:DOM节点二(dom基本操作)
一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...
随机推荐
- Entity Framework7 入门之全功能.NET(Console, WinForms, WPF等)使用EF7
昨天,我们介绍了EF的新特性和开发计划,如果你还不了解,请移步 Entity Framework7 有哪些不同?现在开发到什么程度了? .今天,我们开学习全功能.NET(Full .NET)下使用EF ...
- jQuery 对象和 DOM 对象
jQuery(DOM对象) 或者 $(DOM对象) 此函数的作用是将DOM对象,转换为jQuery的对象 DOM对象其实就是javascript的函数对象,可以用来操作所有HTML元素.比如: a标签 ...
- go语言基础之递归函数的调用流程
一.递归函数的调用流程 package main //必须 import "fmt" func test(a int) { if a == 1 { //函数终止调用的条件,非常重要 ...
- SQL Server之RAID简介
一: RAID简介 RAID(Redundant Array of Independent Disk 独立冗余磁盘阵列)是一项数据保护策略. 二: RAID的几种常用级别 1. RAID 0: 通过并 ...
- SQL Server Service Broker 简单例子 (转)
SQL Server Service Broker服务体系结构 消息类型 — 定义应用程序间交换的消息的名称.还可以选择是否验证消息.约定 — 指定给定会话中的消息方向和消息类型.队列 — 存储消息. ...
- Kotlin(2): 优雅地扩展类的方法和属性
欢迎Follow我的GitHub, 关注我的CSDN. 个人博客: http://www.wangchenlong.org/, 最新内容. Kotlin由JetBrains公司推出, 是兼容Java的 ...
- 转:sublime2 官方网址
1. sublime2 官方网址 http://www.sublimetext.com/2
- 在weka中添加libSVM或者HMM等新算法
转:http://kasy-13.blog.163.com/blog/static/8214691420143226365887/ Weka的全名是怀卡托智能分析环境(Waikato Environm ...
- Android中的一些小技巧
这个是App判断是pad还是手机的代码: public boolean isTabletDevice() { TelephonyManager telephony = (TelephonyManage ...
- html5图表
http://www.html5tricks.com/tag/html5图表