正文 

当前位置： 首页 > java > java语法

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

卖酱油的周董      2022-02-11     172

关键词：

 
转： http://www.jb51.net/article/91991.htm
这篇文章给大家分享了AngularJS循环实现数据列表的增加、删除和上移下移等基础功能，对大家学习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:‘‘
  });
 },
 //刪除；
 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>

js实现数组内数据的上移和下移

varswapItems=function(arr,index1,index2){　　arr[index1]=arr.splice(index2,1,arr[index1])[0]　　returnarr}vararr=[1,2,3]varnewArr=[]upData(arr,index){　　if(this.arr.length>1&&index!==0){　　　　newA 查看详情

vue做一个上移和下移，删除的li功能(代码片段)

效果图：思路就是冒泡原理，把数据放到一个空数组，对其进行排序,单选框用到的是iview。具体实现代码：<divv-for="iteminsingledLists":key="item.index">//数组singledLists<Checkbox@on-change="checkSingle":disabled="isDisabled"v-model="item.isRight 查看详情

db2数据库某一个表增加新列后，如何改变该列在表中的排序？表右方的“上移”和“下移”好像都用不了。

...39;表名大写'ORDERBYORDINAL_POSITION;ORDINAL_POSITION就是存储到数据库系统的列顺序，这个好像不能修改，你可以重新表，然后列的顺序和定义时的顺序一样。参考技术A需要把表drop掉重建了，不然列的顺序改不了，不然就是加在最后... 查看详情

使用jquery实现option的上移和下移

基本思路：  上移：（1）获取当前选中的元素的索引值      （2）判断当前元素是否为第一个元素      （3）如果是，则不执行上移操作，如果不是，则则调用insertBefore方法插入... 查看详情

jquery实现table动态添加行删除行以及行的上移和下移

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title></title><scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script>... 查看详情

元素的上移下移等排序操作

...求，包括：上移、下移、置顶、置底。那么这些操作如何实现呢？ 上移，简言之就是将需要上移的元素和它前面元素交换位置，使用insertBefore(),大致思路为：vardom=需要上移的元素;vardomPrev=dom.prev();dom.insertBefore(domPrev);下移，... 查看详情

请教jquery对表格的行操作的。对页面表格进行上下移动位置，删除记录的操作。谢谢。如下补充

...厂商数量封装批号供应商单价操作asdf原装asdf0123上移下移删除model004原装asdasda011上移下移删除model001信息技术原装dasdas025上移下移删除model002信息技术原装dasdas026上移下移删除model003信息技术原装dasdas011上移下移删除asdasd原装sadasd... 查看详情

table中实现数据上移下移效果

...数据，再重新添加一条数据，办法有点笨，但是好歹也是实现了，望有好的办法的，请留言<el-table:data="tableData"style="width:100%"><el-table-columnprop="date"label="日期"width="18 查看详情

TableView - 单元格的上移和下移功能

...:18:07【问题描述】：我有一个TableView的情况。我正在尝试实现一个允许向上或向下移动单元格的功能。向上或向下移动单元格（带有单元格内容）后，我想将焦点更改为单元格的新位置。问题是它不会更改到新位置。由于某种原... 查看详情

jqgrid上移下移单元格(代码片段)

...中常常需要调整表格中数据的显示顺序，我用的是jqgrid,实现原理就是将表中的行数保存到数据库中，取数据时按行进行排序1、上移，下移按钮<ahref="javascript:void(0)"onclick="operateWithOneRowById(up)"class="linkButton">上移</a><ahref... 查看详情

上移下移扩展版总结(代码片段)

...移：剪切所点击的条目插入到上一条目前面 过渡效果实现：CSS3的transition或js实现 实现思路：transitio 查看详情

在有序数据表中实现多记录上移下移置顶置底算法思路

引言数据库应用中常需要在一个有序数据子集中，对指定的若干条记录进行上下移动。例如，管理员需要对新闻列表中的若干条新闻置顶，考试出卷时需要对选定题目进行上下移动重排顺序，等等。总的应该场景在数据表中可以... 查看详情

cdatagridview中怎样把多行数据同时上移或下移

...对DataGridView本身的操作。2和DataGridView稀有据源这时操作数据源然后刷新DataGridView就可以了。---------------你可以换一种思路将多行移动改变为一行的移除与插入。假如还有不清楚把你的需求说更清楚些明天有时光发个例子给你。... 查看详情

js数组移动上移下移置顶置底，vue实现表格上下移动置底置顶

js操作数组移动 //先封装js数组交换顺序方法/*参数说明arr是要操作的数组index1是准备移动的元素index2是准备移动到的位置往下移就是index2=index+1往上移动就是index2=index+1；这个也可以在页面试试那个方法就指导了，但是置顶和... 查看详情

angularjs实现动态表格的删除与增加

 <divclass="wrap"ng-controller="ViewController"><divclass="butgroup"> <buttontype="button"id="addData"class="btnbtn-success"ng-click="addData()">AddData</button> <b 查看详情

在PyQt5中上下移动行[重复]

...”。点击上移，当前行应该上移一行，类似于“下移”。实现相应的上移和下移功能最简单的方法是什么？或者是否可以将此sn-p代码更新为在pyqt4中执行相同任务的pyqt5！importsysfromPyQt 查看详情

思想上移，行动下移

...导致对于问卷的相关内容，不敢苟同，做以深思。借思想上移。行动下移，八字总结，以表不忘初心之念。首先。我想说的是：也许。我没有不论什么资格写这篇总结，由于我也是来工作的。更何况，还仅仅是个初入社会的... 查看详情

wpflistbox选中项上移下移

原文:wpflistbox选中项上移下移 privatevoidMoveUp_Click(objectsender,RoutedEventArgse)????????????DataRowViewrowView=this.listScrip.SelectedItemasDataRowView;???????if(rowView==null)?????????????? 查看详情