angularJS实现动态添加,删除div方法


Posted in Javascript onFebruary 27, 2018

要实现的功能类似下图,动态添加或者删除div

点击 增加可添加一条div 点击删除可删除一条div

angularJS实现动态添加,删除div方法

HTML代码如下:(省略CSS样式代码了大笑)

<div class="accordion-inner">
  <div class="alert alert-info fade in" ng-repeat="permission in permissions">授权给:
    <select id="" class="grantees" disabled="" style=" margin-bottom: 3px;" ng-model="permission.grantee">
      <option value="everyone">所有人</option>
      <option value="authenUsers">已认证的用户</option>
      <option value="me" selected="">我自己</option>
    </select>
    <input type="checkbox" checked="" class="permissions" disabled="" ng-model="permission.port1">Open/Download
    <input type="checkbox" checked="" class="permissions" disabled="" ng-model="permission.port2">View Permissions
    <input type="checkbox" checked="" class="permissions" disabled="" ng-model="permission.port3">Edit Permissions
    <button class="btn" type="button" style="float: right;" ng-click="delPermission($index)">删除</button>
  </div>
  <div>
    <button class="btn" type="button" ng-click="addPermission($index)">增加访问许可</button>
  </div>
  <br>
  <div>
    <button class="btn btn-primary" type="button">保存</button>
    <button class="btn" type="button">取消</button>
  </div>
</div>

添加和删除的JS代码分别如下:

//增加许可访问div
$scope.permissions = [{grantee: "",port1:"",port2:"",port3:""}];
$scope.addPermission = function($index){
  $scope.permissions.splice($index + 1, 0,
    {grantee:"", port1:"",port2:"",port3:""});
}
//删除许可访问div
$scope.delPermission = function($index){
  $scope.permissions.splice($index, 1);
}

以上这篇angularJS实现动态添加,删除div方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
js漂浮广告实现代码
Aug 15 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 #Javascript
AngularJS动态添加数据并删除的实例
Feb 27 #Javascript
JS严格模式知识点总结
Feb 27 #Javascript
总结js函数相关知识点
Feb 27 #Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
详解Vue Elememt-UI构建管理后台
Feb 27 #Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 #Javascript
You might like
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
JS取得绝对路径的实现代码
2015/01/16 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
python生成式的send()方法(详解)
2017/05/08 Python
Python 爬虫图片简单实现
2017/06/01 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
北京大学自荐信范文
2014/01/28 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
采购意向书范本
2014/03/31 职场文书
工伤赔偿协议书
2014/04/15 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2015年父亲节寄语
2015/03/23 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
疾病证明书
2015/06/19 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
应收账款管理制度
2015/08/06 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书