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 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
jquery easyui使用心得
Jul 07 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 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安全性需要注意的几点事项
2014/07/17 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python检测生僻字的实现方法
2016/10/23 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
一百多行python代码实现抢票助手
2018/09/25 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python Gitlab Api 使用方法
2019/08/28 Python
python模拟实现斗地主发牌
2020/01/07 Python
django教程如何自学
2020/07/31 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
护理实习自我鉴定
2013/12/14 职场文书
学习十八大标语
2014/10/09 职场文书
公司食堂管理制度
2015/08/05 职场文书
委托书范本格式
2019/04/18 职场文书
Python基础之数据结构详解
2021/04/28 Python
Python 如何解决稀疏矩阵运算
2021/05/26 Python
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL