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 相关文章推荐
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 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下删除一篇文章生成的多个静态页面
2010/08/08 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
php微信公众平台开发类实例
2015/04/01 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
python爬取音频下载的示例代码
2020/10/19 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
小区停车场管理制度
2014/01/27 职场文书
上课看小说检讨书
2014/02/22 职场文书
文明寝室申报材料
2014/05/12 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
学生保证书
2015/01/16 职场文书
护士医德考评自我评价
2015/03/03 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery