AngularJS实现数据列表的增加、删除和上移下移等功能实例


Posted in Javascript onSeptember 05, 2016

效果图

AngularJS实现数据列表的增加、删除和上移下移等功能实例

实例代码

<!DOCTYPE html>
<html lang="en" ng-app="myapp" ng-controller="myCtrl">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{margin:0;padding:0; list-style: none;font-size:12px;}
 .clearfix{overflow: hidden;display:block;clear:both}
 .clearfix:after{zoom:1}
 .relation{margin-top:7px;font:14px/38px "微软雅黑"; height: 38px; background: #f8f8f8; padding-left: 26px; color: #666;}
 .relation li{ margin-top: 5px;float:left;padding-left:50px;cursor:pointer;text-decoration: double}
 .relation li:hover{color:#f00};
 .tableMain li{float:left;padding:5px 10px;width:50px}
 .ullist1 li.num39{width: 39px; height: 36px;line-height: 36px; text-align: center; float: left; border-right: 1px solid #ddd;}
 .ullist1 li.num73{width: 73px; height: 36px;line-height: 36px; text-align: center; float: left; border-right: 1px solid #ddd;}
 .ullist1 li.num85{width: 85px; height: 36px; line-height: 36px; text-align: center; float: left; border-right: 1px solid #ddd;}
 .ullist1 li.num114{width:140px; height: 36px;line-height: 36px; text-align: center; float: left; border-right: 1px solid #ddd;}
 .ullist1 li.num122{width:170px; height: 36px;line-height: 36px; text-align: center; float: left; border-right: 1px solid #ddd;}
 .ullist1 li.num167{width:180px; height: 36px;line-height: 36px; text-align: center; float: left; border-right: 1px solid #ddd;}
 .ullist1 li.num185{width:185px; height: 36px;line-height: 36px; text-align: center; float: left; border-right: 1px solid #ddd;}
 .ullist1 li.num70{width:70px;height: 36px;line-height: 36px; text-align: center; float: left; border-right: 1px solid #ddd;}
 .ullist1 li.num103{width:183px; height: 36px;line-height: 36px; text-align: center; float: left; border-right: 1px solid #ddd;}
 .ullist1 li.num97{width:160px; height: 36px;line-height: 36px; text-align: center; float: left; border-right: 1px solid #ddd;}
 .ulConter1 li.num39{width: 39px;height: 42px; line-height: 42px; float: left; border-right: 1px solid #ddd;}
 .ulConter1 li.num73{width: 73px; height: 42px; line-height: 42px; float: left; border-right: 1px solid #ddd;}
 .ulConter1 li.num85{width: 85px; height: 42px; line-height: 42px; float: left; border-right: 1px solid #ddd;}
 .ulConter1 li.num114{width:140px; height: 42px; line-height: 42px; float: left; border-right: 1px solid #ddd;}
 .ulConter1 li.num122{width:170px; height: 42px; line-height: 42px; float: left; border-right: 1px solid #ddd;}
 .ulConter1 li.num167{width:180px; height: 42px; line-height: 42px; float: left; border-right: 1px solid #ddd;}
 .ulConter1 li.num185{width:185px; height: 42px; line-height: 42px; float: left; border-right: 1px solid #ddd;}
 .ulConter1 li.num70{width:70px; height: 42px; line-height: 42px; float: left; border-right: 1px solid #ddd;}
 .ulConter1 li.num103{width:183px; height: 42px; line-height: 42px; float: left; border-right: 1px solid #ddd;}
 .ulConter1 li.num97{width:160px; height: 42px; line-height: 42px; float: left; border-right: 1px solid #ddd;}

 .ulConter1 li.num39 input{ width:19px; height: 19px; margin:11px; border: 1px solid #ddd; }
 .ulConter1 li.num73 input{ width:68px; border: 1px solid #ddd; margin: 2px;line-height: 32px; height: 32px;}
 .ulConter1 li.num85 input{ width:80px; border: 1px solid #ddd; margin: 2px;line-height: 32px; height: 32px;}
 .ulConter1 li.num114 input{ width:135px; border: 1px solid #ddd; margin: 2px;line-height: 32px; height: 32px;}
 .ulConter1 li.num122 input{ width:165px; border: 1px solid #ddd; margin: 2px;line-height: 32px; height: 32px;}
 .ulConter1 li.num167 input{ width:175px; border: 1px solid #ddd; margin: 2px;line-height: 32px; height: 32px;}
 .ulConter1 li.num185 input{ width:180px; border: 1px solid #ddd; margin: 2px;line-height: 32px; height: 32px;}
 .ulConter1 li.num70 input{ width:65px; border: 1px solid #ddd; margin: 2px;line-height: 32px; height: 32px;}
 .ulConter1 li.num103 input{ width:178px; border: 1px solid #ddd; margin: 2px;line-height: 32px; height: 32px;}
 .ulConter1 li.num97 input{ width:150px; border: 1px solid #ddd; margin: 2px;line-height: 32px; height: 32px;}

 </style>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<ul class="relation clearfix">
 <li class="news" ng-click="others.addContact()">新增</li>
 <li class="dele" ng-click="others.deleContact()">删除</li>
 <li class="upico" ng-click="others.moveUp()">上移</li>
 <li class="downico" ng-click="others.moveDown()">下移</li>
</ul>
<div class="class="tableMain"">
 <ol class="clearfix ullist1">
 <li class="num39"></li>
 <li class="num73">联系人</li>
 <li class="num85">商务电话</li>
 <li class="num114">移动电话</li>
 <li class="num122">QQ</li>
 <li class="num122">SKYPE</li>
 <li class="num167">电子邮件</li>
 </ol>
 <ul class="ulConter1 clearfix" ng-repeat="item in items" >
 <li class="num39">
  <input type="radio" ng-click="others.selected(item)" name="select">
 </li>
 <li class="num73">
  <input type="text" ng-model="item.otherContact">
 </li>
 <li class="num85">
  <input type="text" ng-model="item.otherBusinessTel" >
 </li>
 <li class="num114">
  <input type="text" ng-model="item.otherMobPhone" >
 </li>
 <li class="num122">
  <input type="text" ng-model="item.otherQQ" >
 </li>
 <li class="num122">
  <input type="text" ng-model="item.otherSKYPE" >
 </li>
 <li class="num167">
  <input type="text" ng-model="item.otherEmail">
 </li> 
 </ul>
</div>

<script>
angular.module('myapp',[]).controller('myCtrl',function($scope){
 $scope.items=[];
 $scope.others={
 selectedItem:{},
 selected:function(item){
  this.selectedItem=item;
 },
 //增加
 addContact:function(){
  $scope.items.push({
  otherContact:'',
  otherBusinessTel:'',
  otherMobPhone:'',
  otherQQ:'',
  otherSKYPE:'',
  otherEmail:'',
  otherDeliveryAddress:'',
  otherSex:'',
  otherDepartment:''
  });
 },
 //?h除;
 deleContact:function(){
  var index=$scope.items.indexOf(this.selectedItem);
  $scope.items.splice(index,1);
 },
 //上移;
 moveUp:function(){
  var index=$scope.items.indexOf(this.selectedItem);
  var tmp=angular.copy($scope.items[index-1]);
  if(index==0){
  alert('已?是第一??了,不能再向上移?恿耍?);
  return ;
  }
  $scope.items[index-1]=$scope.items[index];
  $scope.items[index]=tmp;

 },
 //下移;
 moveDown:function(){
  var index=$scope.items.indexOf(this.selectedItem);

  if(index==$scope.items.length-1){
  alert('已?是最後一??了,不能再向下移?恿耍?);
  return ;
  }
  var tmp=angular.copy($scope.items[index+1]);
  $scope.items[index+1]=$scope.items[index];
  $scope.items[index]=tmp;
 }
 }
})
</script>
</body>
</html>

总结

以上就是这篇文章的全部内容,大家可以自己实践后看下效果,这样更利于大家的理解和学习,希望本文对大家学习或使用AngularJS能有所帮助。如果有疑问可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
原生JS实现$.param() 函数的方法
Aug 10 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 #Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 #Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 #Javascript
AngularJS实现标签页的两种方式
Sep 05 #Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 #Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 #Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 #Javascript
You might like
优化PHP代码的53条建议
2008/03/27 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
降低python版本的操作方法
2020/09/11 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
便利店促销方案
2014/02/20 职场文书
食品安全演讲稿
2014/09/01 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
2022年显卡天梯图(6月更新)
2022/06/17 数码科技