AngularJS实现数据列表的增加、删除和上移下移等功能实例
羊舌承
本文向大家介绍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能有所帮助。如果有疑问可以留言交流，谢谢大家对小牛知识库的支持。
类似资料：
-
本文向大家介绍jQuery实现列表的增加和删除功能，包括了jQuery实现列表的增加和删除功能的使用技巧和注意事项，需要的朋友参考一下 具体代码如下所示: 总结 以上所述是小编给大家介绍的jQuery实现列表的增加和删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍Vuex实现数据增加和删除功能，包括了Vuex实现数据增加和删除功能的使用技巧和注意事项，需要的朋友参考一下 首先，我们要安装vuex，执行命令yarn add vuex 1.编写state数据 2.组件调用state数据进行展示 我们的目的是把state数据赋值给vue组件进行使用，其实，这里有两种常用方法 方式二是我们经常用到的简写方式 基本的数据获取，就是这样的实现，此时我们看
-
本文向大家介绍Vue.js实现一个todo-list的上移下移删除功能，包括了Vue.js实现一个todo-list的上移下移删除功能的使用技巧和注意事项，需要的朋友参考一下 如图，A simple todo-list长这样 这是一个基于vue.js的一个简单的todo-list小demo。首先要实现添加非空list，点击list切换finished状态这样的一个效果，推荐学习地址---->点击打
-
本文向大家介绍JS实现移动端判断上拉和下滑功能，包括了JS实现移动端判断上拉和下滑功能的使用技巧和注意事项，需要的朋友参考一下 一、手指触屏，利用touchstart和touchend计算前后滑动距离，判断是上拉还是下滑。 二、js中距离：pageY、clientY、offsetY的区别： offsetY:相对于父节点的偏移距离。 clientY:相对于浏览器，滚轮距离
-
本文向大家介绍jQuery表格行上移下移和置顶的实现方法，包括了jQuery表格行上移下移和置顶的实现方法的使用技巧和注意事项，需要的朋友参考一下 我们在操作列表数据的时候，需要将数据行排列顺序进行调整，如上移和下移行，将行数据置顶等，这些操作都可以在前端通过点击按钮来完成，并且伴随着简单的动态效果，轻松实现表格数据排序。 运行效果图： HTML 页面上是一个简单的数据表格，我们在数据行中分别放置
-
本文向大家介绍jQuery实现表格行上移下移和置顶的方法，包括了jQuery实现表格行上移下移和置顶的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现表格行上移下移和置顶的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的jQuery程序设计有所帮助。