angular.js 下如何动态插入删除dom节点
2017-08-14 23:35
417 查看
点击打开链接
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 指令和模型绑定生效.类似如下代码:
很明显,没有 $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:"张三"}]
控制器响应的需要实现 add() 方法 和 del(idx) 方法.
ok,这样我们就可以动态添加 /删除 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 动态插入删除dom节点
- js DOM节点的创建、插入、删除、查找、替换例子
- 如何用js动态插入svg?如何在svg中在插入Dom元素
- JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
- angular动态删除ng-repaeat添加的dom节点的方法
- 第9篇:angular动态删除或插入节点元素
- angular动态删除ng-repaeat添加的dom节点
- vue.js插入dom节点的方式
- JS动态增加删除UL节点LI及相关内容
- 【js学习笔记-086】-----创建、插入、删除节点
- JS-DOM 综合练习-动态添加删除班级成绩表
- js如何实动态删除DIV
- JS动态增加删除UL节点LI
- js 访问,插入,替换,创建,删除节点介绍
- js删除空白节点的函数(DOM)
- JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)
- 动态插入、添加删除表格行的JS代码
- 【郝斌数据结构自学笔记】16-23_链表的定义与分类_链表节点插入与删除_每一个链表节点的数据类型该如何表示的问题
- DOM替换replaceWith()和replaceAll() 之前学习了节点的内插入、外插入以及删除方法,这节会学习替换方法replaceWith .replaceWith( newConten