AngularJS实现数据列表的增加、删除和上移下移等功能实例  更新时间:2016年09月05日 16:19:57   投稿:daisy   这篇文章给大家分享了AngularJS循环实现数据列表的增加、删除和上移下移等基础功能,对大家学习AngularJS具有一定的参考借鉴价值,有需要的朋友可以看看。 效果图 实例代码 Title 新增 删除 上移 下移 联系人 商务电话 移动电话 QQ SKYPE 电子邮件 总结 以上就是这篇文章的全部内容,大家可以自己实践后看下效果,这样更利于大家的理解和学习,希望本文对大家学习或使用AngularJS能有所帮助。如果有疑问可以留言交流,谢谢大家对脚本之家的支持。 您可能感兴趣的文章: 基于js实现数组相邻元素上移下移 js操作table中tr的顺序实现上移下移一行的效果 JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例 js实现数组内数据的上移和下移的实例 Vue.js实现一个todo-list的上移下移删除功能 JS实现的表格操作类详解(添加,删除,排序,上移,下移) js实现Select列表各项上移和下移的方法 JS实现点击上移下移LI行数据的方法 JS实现一个列表中包含上移下移删除等功能 js实现按钮进行某行上移下移 angularjs 列表 删除 增加 相关文章 AngularJS之自定义服务详解(factory、service、provider) 本篇文章主要介绍了AngularJS之自定义服务详解(factory、service、provider),具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-04-04 AngularJS实现表单验证 客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJS中,有许多表单验证指令。在这里,我们将谈谈几个最流行指令,然后我们将讨论如何编写自定义的验证。 2015-01-01 详解angular中如何监控dom渲染完毕 AngularJs是Google开源的前端JS框架。使用AngularJs, 我们能够容易地、健壮的开发出类似于Gmail一样的单页Web应用。这篇文章主要介绍了详解angular中如何监控dom渲染完毕,有兴趣的可以了解一下。 2017-01-01 Angular组件化管理实现方法分析 这篇文章主要介绍了Angular组件化管理实现方法,结合具体实例分析了Angular模块组件化管理以提高代码复用性的实现方法与相关操作技巧,需要的朋友可以参考下 2017-03-03 AngularJS实现网站换肤实例 这篇文章主要为大家详细介绍了AngularJS实现网站换肤的简单实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-12-12 详解angular2如何手动点击特定元素上的点击事件 这篇文章主要介绍了详解angular2如何手动点击特定元素上的点击事件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-10-10 Angular通过angular-cli来搭建web前端项目的方法 这篇文章主要介绍了Angular通过angular-cli来搭建web前端项目的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-07-07 基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码 这篇文章主要给大家介绍基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动的实例代码,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧 2016-05-05 深究AngularJS中ng-drag、ng-drop的用法 本篇文章主要介绍了深究AngularJS中ng-drag、ng-drop的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 AngularJS使用ng-repeat指令实现下拉框 这篇文章主要介绍了AngularJS使用ng-repeat指令实现下拉框的相关资料,非常不错,感兴趣的朋友一起看下吧,需要的朋友可以参考下 2016-08-08 最新评论

效果图

实例代码

<!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:''
  });
 },
 //刪除;
 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能有所帮助。如果有疑问可以留言交流,谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

  • 基于js实现数组相邻元素上移下移
  • js操作table中tr的顺序实现上移下移一行的效果
  • JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
  • js实现数组内数据的上移和下移的实例
  • Vue.js实现一个todo-list的上移下移删除功能
  • JS实现的表格操作类详解(添加,删除,排序,上移,下移)
  • js实现Select列表各项上移和下移的方法
  • JS实现点击上移下移LI行数据的方法
  • JS实现一个列表中包含上移下移删除等功能
  • js实现按钮进行某行上移下移
张贴在3