转： 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. centos7安装Scala、Spark(伪分布式)

    centos7安装spark(伪分布式) spark是由scala语言开发的,首先需要安装scala. Scala安装 下载scala-2.11.8,(与spark版本要对应) 命令:wget htt ...

  2. prometheus 监控jvm-tomcat

    1.prometheus的配置 - job_name: 'java01' #按照这个来分组 scrape_interval: 10s static_configs: - targets: ['192. ...

  3. Angular中ngx-image-cropper图片裁剪的使用

    GitHub示例源码地址:https://github.com/luoruiemail/ngx-image-cropper 下载下来之后,执行yarn install安装相关node_modules包 ...

  4. 关于mysql的自增测试,innodb和myisam下的不同表现

    关于mysql的自增测试,innodb和myisam下的不同表现 innodb引擎下的自增id测试 1 innodb引擎下,如果显示insert了最大值,那么下次的AUTO_INCREMENT值就是这 ...

  5. ######【Python】【基础知识】Python的介绍 ######

    Python 是一种面向对象.解释型计算机程序设计语言. Python是什么? Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象的解释型计算机程序设计语言 ...

  6. win10下访问vm虚拟机Linux服务

    一.环境 win10操作系统 centos6.5 VMware® Workstation 14 Pro虚拟机 二.互相访问设置步骤 1.查看如下图所示 2.记住上面的IP和网关,进行如下图操作 点击应 ...

  7. idea配置glassFish

    FIile ---> settings ---> 查找Application Server .. 点击加号,, 点击glassFish Server.. 找到glassFish存放路径 点 ...

  8. 减2或减3（很搞的贪心）2019牛客国庆集训派对day6

    题意:https://ac.nowcoder.com/acm/contest/1111/D 问你先减二x次的情况下,最少减几次3. 思路: %3不为0的要先减2,然后%3为0的要先减大的(比如9 3 ...

  9. linux环境下Python搭建

    安装gcc   yum install gcc 安装zlib   yum -y install zlib* 安装openssl-devel   yum install openssl-devel -y ...

  10. java 序列化和反序列化的底层实现原理

    出处:序列化和反序列化的底层实现原理是什么? 一.基本概念1.什么是序列化和反序列化 (1)Java序列化是指把Java对象转换为字节序列的过程,而Java反序列化是指把字节序列恢复为Java对象的过 ...