编程 Javascript

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

Posted in Javascript onSeptember 05, 2016

实例代码

<!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能有所帮助。如果有疑问可以留言交流，谢谢大家对三水点靠木的支持。

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

- Author -

daisy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript实现的网页局布刷新效果

Dec 01 Javascript

深入理解JSON数据源格式

Jan 10 Javascript

元素未显示设置width/height时IE中使用currentStyle获取为auto

May 04 Javascript

jquery实现点击变换导航样式的方法

Aug 31 Javascript

深入理解JavaScript中的块级作用域、私有变量与模块模式

Oct 31 Javascript

JQuery实现文字无缝滚动效果示例代码(Marquee插件)

Mar 07 Javascript

详解vue.js移动端导航navigationbar的封装

Jul 05 Javascript

JS简单实现父子窗口传值功能示例【未使用iframe框架】

Sep 20 Javascript

JS实现指定区域的全屏显示功能示例

Apr 25 Javascript

Vue 实现分页与输入框关键字筛选功能

Jan 02 Javascript

梳理一下vue中的生命周期

Dec 30 Vue.js

使用compose函数优化代码提高可读性及扩展性

Jun 16 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