转： 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. 鸟哥私房菜基础篇：Linux 账号管理与 ACL 权限配置习题

    猫宁!!! 参考:http://cn.linux.vbird.org/linux_basic/0410accountmanager.php 1-root 的 UID 与 GID 是多少?而基于这个理由 ...

  2. PJzhang:python基础进阶的10个疗程-one

    猫宁!!! 课程导学 北京理工大学 国家精品在线开放课程 零基础.大学水平 100行左右的python可以做很多事情 编程是基本技能,体会思维 时间成本和收益的关系 每周5个小时 https://py ...

  3. 利用sklearn的Pipeline简化建模过程

    很多框架都会提供一种Pipeline的机制,通过封装一系列操作的流程,调用时按计划执行即可.比如netty中有ChannelPipeline,TensorFlow的计算图也是如此. 下面简要介绍skl ...

  4. spring-cloud-starter-stream-rocketmq 坑点j记录

  5. JAVA实验报告及第七周总结

    JAVA第六周作业 实验报告五 第一题 1.设计一个类层次,定义一个抽象类--形状,其中包括有求形状的面积的抽象方法. 继承该抽象类定义三角型.矩形.圆. 分别创建一个三角形.矩形.圆存对象,将各类图 ...

  6. CWMP开源代码研究7——cwmp移植

    原创作品,转载请注明出处,严禁非法转载.如有错误,请留言! email:40879506@qq.com 声明:本系列涉及的开源程序代码学习和研究,严禁用于商业目的. 如有任何问题,欢迎和我交流.(企鹅 ...

  7. [转帖]如何备份及恢复Linux文件权限

    如何备份及恢复Linux文件权限   http://embeddedlinux.org.cn/emb-linux/entry-level/201604/10-5337.html 三年前我就干过 chm ...

  8. SQL 拼接字符串 使用IN查询方法

    问题描述 当在 SQL SERVER 中查询的时候,同事遇到一个字段存储的字符串为用逗号分隔的主键 ID 值,格式为:1,2,3,4,这时候需要查询符合条件的所有数据,所以选择使用 IN 查询,但是直 ...

  9. 第十三章 字符串 （四）之Scanner类

    一.Scanner简述 Scanner扫描器类本质上是由正则表达式实现的,可以接受任何能产生数据的数据源对象,默认以空白符进行分词(包括\n等),使用各种next方法进行扫描匹配,获取匹配的数据. 二 ...

  10. PHP数组和对象之间的互换

    今天在和前端对接接口的时候,从后台返回数据给前端的时候出现如下JSON格式数据 "goods": [ { "id": "dEQ144800584Lx& ...