Angularjs 实现动态添加控件功能


Posted in Javascript onMay 25, 2017

实现下面这样的需求:

Angularjs 实现动态添加控件功能

点击增加一块数据盘,会出现数据盘选项。

(1)最开始,想到原生JavaScript,jQuery (appendChild()等方法结合AngularJS来添加新的元素。但是突然发现控件里面的数据绑定,原生javascript没法控制。

(2)上网查资料,找到$compile服务,动态改变html内容。本以为这可以解决我的需求,但是仔细研究发现$compile是这样的东西。

用$compile服务创建一个directive ‘compile',这个complie会将传入的html字符串或者DOM转换为一个template,然后直接在html里调用compile即可

Angularjs 实现动态添加控件功能

Angularjs 实现动态添加控件功能

(3)$compile不能满足我的需求,继续找资料,才发现angularjs实现这样的需求,如此简洁明朗。即ng-repeat  $index.

<div ng-repeat="item in DATA.data"> 
    <div class="form-group"> 
    <div class="col-md-12"> 
      <label class="col-md-1" >{{$index + 1}}</label> 
      <div class="col-md-9"><input type="text" class="form-control" ng-model="item.value" name="item{{$index + 1}}" /></div> 
      <div><input type="button" ng-click="item.delete($index)" value="删除"></div> 
    </div> 
    </div> 
</div 
<div><input type="button" ng-click="add()" value="增加"></div>
testModule.controller('testController', 
   function ($scope, $log) { 
     $scope.DATA = new Object(); 
     $scope.DATA.data = [{key: 0, value: ""}]; 
    // add 
     $scope.add = function($index) {         
       // 用时间戳作为每个item的key        
       $scope.DATA.data.splice($index + 1, 0,{key: new Date().getTime(), value: ""});    
     } 
     // delete 
     $scope.DATA.delete = function($index) {      
      $scope.DATA.data.splice($index, 1); 
    } 
});

以上所述是小编给大家介绍的Angularjs 实现动态添加控件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于递归运算的顺序测试代码
Nov 30 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
js charAt的使用示例
Feb 18 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
JavaScript实现自动跳转文本功能
May 25 #Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 #Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 #Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 #Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 #jQuery
基于VUE选择上传图片并页面显示(图片可删除)
May 25 #Javascript
jQuery滚动插件scrollable.js用法分析
May 25 #jQuery
You might like
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
JS 树形递归实例代码
2010/05/18 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
详解node中创建服务进程
2017/05/09 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
python调用百度语音REST API
2018/08/30 Python
python实现ip地址的包含关系判断
2020/02/07 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
如何用python批量调整视频声音
2020/12/22 Python
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
幼儿园保育员辞职信
2014/01/12 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
文明工地标语
2014/06/16 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
基于JavaScript实现省市联动效果
2021/06/22 Javascript