转： 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. SpringCloud+Eureka快速搭建微服架构

    什么是springcloud? Springcloud是一个微服务框架,相比dubbo等,springcloud提供全套的分布式系统解决方案. Eureka是什么? Eureka是netflix的一个 ...

  2. django 之(三) --- 会话|关系|静态*

    会话技术 HTTP在web开发中基本都是短连接[一个请求的生命周期都是从request开始到response结束]. 下次再来请求就是一个新的连接了.为了让服务器端记住用户端是否登陆过就出现了会话技术 ...

  3. lamp的动静分离部署

    一.lamp分离部署工作图 二.LAMP的安装与配置 1.环境准备 2.对 PHP 服务器进行部署 #以下为安装PHP及其依赖 [root@php ~ ]# .tar.gz -C /usr/src [ ...

  4. Y2K Accounting Bug POJ2586

    Description Accounting for Computer Machinists (ACM) has sufferred from the Y2K bug and lost some vi ...

  5. TPM大端模式

    1. Big-Endian(BE)大端模式 数据是按照,“高字节.低存储”,即高字节存储在低地址,符合人们直观感受 2. Little-Endian(LE)小端模式 数据是按照,“低字节,低存储”,即 ...

  6. 【VS开发】【DSP开发】WinDriver简介（或介绍）

    WinDriver for Windows简化并自动化了用户模式Windows设备驱动程序的开发,支持设备包括PCI / CardBus / ISA/ PCI-104 / PCMCIA * / PMC ...

  7. 【VS开发】CTabView多页卡界面

    转载地址:http://blog.csdn.net/akof1314/article/details/5618454 目录(?)[-] Public Methods Protected Methods ...

  8. PHP学习（2）——操作符与迭代整理

    目录: 10.操作符整理 11.表单计算代码 12.优先级与结合性 13.可变函数 14.条件判断 15.循环迭代 16.跳出控制 17.可替换的控制结构 10.操作符 10.1 算术操作符 算术操作 ...

  9. jQuery 虚拟数字键盘代码

    先上效果:    js直接应用:  $('input').mynumkb(); 就出来效果 HTML: <input maxlength="4" type="tex ...

  10. python标准库之shutil——可操作权限的文件操作库

    转载自:https://www.jb51.net/article/145522.htm shutil模块提供了许多关于文件和文件集合的高级操作,特别提供了支持文件复制和删除的功能. 文件夹与文件操作 ...