转： 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. CF792E Colored Balls【思维】

    题目传送门 考试的时候又想到了小凯的疑惑,真是中毒不浅... 设每一个数都可以被分成若干个$k$和$k+1$的和.数$x$能够被分成若干个$k$和$k+1$的和的充要条件是:$x%k<=floo ...

  2. ULB

    https://docs.ucloud.cn/network/ulb/intro/whatisulb 创建ulb ulb里创建vserver, 设置监听端口 配置后端转发节点(服务节点) 在服务节点上 ...

  3. 2019牛客暑期多校训练营（第八场）-C CDMA（递归构造）

    题目链接:https://ac.nowcoder.com/acm/contest/888/C 题意:输入m(为2的n次幂,n<=10),构造一个m*m的矩阵满足任意不同的两行的元素乘积和为0. ...

  4. SpringBoot整合持久层技术-创建项目

    新建项目 Pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&q ...

  5. 大数据备忘录———将数据从oracle导入impala中

    上周遇到了将数据从oracle导入到impala的问题,这个项目耽误了我近一周的时间,虽然是种种原因导致的,但是还是做个总结. 需求首先是跑数据,跑数据这个就不叙述,用的是公司的平台. 讲讲耽误我最久 ...

  6. Educational Codeforces Round 68 (Rated for Div. 2)补题

    A. Remove a Progression 签到题,易知删去的为奇数,剩下的是正偶数数列. #include<iostream> using namespace std; int T; ...

  7. Yii2.0 组件

    框架之所以是框架,是因为其强大,其封装了很多实用的功能,开发者可以开箱即用. 下边列举Yii2.0的部分组件: var_dump(Yii::$app->session->getId()); ...

  8. 执行jar包，输出信息到文件

    有时如果临时需要上项目执行一些脚本或者临时文件,可以将项目达成jar包,去执行 执行jar包: java -jar test.jar 输出日志到文件:nohup java -jar test.jar ...

  9. 使用python操作kafka

    使用python操作kafka目前比较常用的库是kafka-python库 安装kafka-python pip3 install kafka-python 生产者 producer_test.py ...

  10. 6-Perl 标量

    1.Perl 标量标量是一个简单的数据单元.标量可以是一个整数,浮点数,字符,字符串,段落或者一个完整的网页.以下实例演示了标量的简单应用:实例#!/usr/bin/perl$age = 20; # ...