转： 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>

AngularJS实现数据列表的增加、删除和上移下移等功能实例的更多相关文章

  1. 转： KindEditor 图片空间文件增加删除文件、文件夹功能（ASP语言环境）

    KindEditor 图片上传功能中集成的图片空间文件管理插件可以对已上传图片进行管理,十分便捷,只是没有图片删除功能,仔细研读xieliang分享的经验后,自己动手改造了一下,顺便分享给有同样需求的 ...

  2. c# gridview数据列表中NamingContainer容器的用法

    当在前台我们绑定了一个linkbutton型的按钮,并触发了onserverclick="delBook_Server"的服务端事件,前台代码如下: <asp:Templat ...

  3. python学习第十天列表的增加，修改，删除操作方法

    在一个有序的数据列表中,集各种数据类型,可以向列表增加元素,也可以修改列表里面的元素,可以删除列表的里面元素,append(),insert(),remove(),pop(),和全局DEL 删除等. ...

  4. .net MVC中使用angularJs刷新页面数据列表

    使用angularjs的双向绑定功能,定时刷新页面上数据列表(不是刷新网页,通过ajax请求只刷新数据列表部分页面),实例如下: @{ Layout = null; } <!DOCTYPE ht ...

  5. Nodejs之MEAN栈开发（九）---- 用户评论的增加/删除/修改

    由于工作中做实时通信的项目,需要用到Nodejs做通讯转接功能,刚开始接触,很多都不懂,于是我和同事就准备去学习nodejs,结合nodejs之MEAN栈实战书籍<Getting.MEAN.wi ...

  6. 使用easyui实现列表的批量删除

    使用easyui实现列表的批量删除 首先要做的就是增加一个多选框 <table id="otGrid" nowrap="false" style=&quo ...

  7. 页面设计-数据列表 DataGrid

    传统软件项目开发时,针对每个业务单据页面需要每控件一个一个的来设计,同时需要在页面功能中对每个控件的属性进行判定处理,尤其是页面风格布局样式需要花去一大半的时间,并且后续要想修改是非常麻烦繁琐,这样就 ...

  8. php从数据库里取出的数据列表里添加一个属性实战例子

    php从数据库里取出的数据列表里添加一个属性实战例子:$opendata = $this->omitmodel->getHistory(1,1);var_dump($opendata);f ...

  9. [JavaWeb基础] 004.用JSP + SERVLET 进行简单的增加删除修改

    上一次的文章,我们讲解了如何用JAVA访问MySql数据库,对数据进行增加删除修改查询.那么这次我们把具体的页面的数据库操作结合在一起,进行一次简单的学生信息操作案例. 首先我们创建一个专门用于学生管 ...

随机推荐

  1. 安装nova

    在控制节点上执行 controllerHost='controller' controllerIP='172.31.240.49' MYSQL_PASSWD='m4r!adbOP' RABBIT_PA ...

  2. Hbase和Hadoop的内存参数调优 + 前端控制台

    1.hadoop的内存配置调优 mapred-site.xml的内存调整 <property> <name>mapreduce.map.memory.mb</name&g ...

  3. javascript图片库威力增强版

    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con ...

  4. Python全栈开发之4、迭代器、生成器、装饰器

    一.迭代器 1.为何要有迭代器? 对于序列类型:字符串.列表.元组,我们可以使用索引的方式迭代取出其包含的元素.但对于字典.集合.文件等类型是没有索引的,若还想取出其内部包含的元素,则必须找出一种不依 ...

  5. 快速排序的Python代码实现

    选择一个数,和它后面的数比较,把比它小的放在它的左边,大的在右边(位置可能会因为左边元素的添加而右移) def quick_sort(arr): if arr==[]: return[] else: ...

  6. IO（上）

    1 输入流和输出流 输入流,数据从源数据源流入程序的过程称为输入流.可以理解为从源数据源读取数据到程序的过程. 输出流,数据从程序流出到目的地的过程称为输出流.可以理解为把数据从程序写入目的地的过程. ...

  7. Mysql中多表删除

    1.从MySQL数据表A中把那些id值在数据表B里有匹配的记录全删除掉 DELETE t2 FROM A t1,B t2 WHERE t1.id = t2.id DELETE FROM t2 USIN ...

  8. PHPRedis教程之geo

    前言 支持 GEO 系列命令的 Redis 版本从 3.2.0 起开始才可以使用,所以之前版本就不要想了. 函数列表 geoadd - 将指定的地理空间项(纬度,经度,名称)添加到指定的键, 数据作为 ...

  9. nginx自定义log_format以及输出自定义http头

    官方文档地址: http://nginx.org/en/docs/http/ngx_http_log_module.html 一.log_format默认格式 首先Nginx默认的log_format ...

  10. 小白简单快速搭建lnmp环境(centos7)

    本来想着自己搭建lnmp,由于php包下载不下来因此这次本人使用的lnmp一键包搭建的环境(很遗憾还没有php7.3.5)很详细并且方便快捷网址https://lnmp.org/install.htm ...