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 相关文章推荐
Jquery 表格合并的问题分享
Sep 17 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
Vue获取微博授权URL代码实例
Nov 04 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下MYSQL limit的优化
2008/01/10 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
Javascript读取cookie函数代码
2010/10/16 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
高中生的自我评价
2014/03/04 职场文书
同居协议书范本
2014/04/23 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技