欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實(shí)例

 更新時(shí)間：2016年09月05日 16:19:57   投稿：daisy  
這篇文章給大家分享了AngularJS循環(huán)實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等基礎(chǔ)功能，對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，有需要的朋友可以看看。

效果圖

實(shí)例代碼

<!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án)系人</li>
 <li class="num85">商務(wù)電話</li>
 <li class="num114">移動(dòng)電話</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('已經(jīng)是第一個(gè)了，不能再向上移動(dòng)了！');
  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('已經(jīng)是最後一個(gè)了，不能再向下移動(dòng)了！');
  return ;
  }
  var tmp=angular.copy($scope.items[index+1]);
  $scope.items[index+1]=$scope.items[index];
  $scope.items[index]=tmp;
 }
 }
})
</script>
</body>
</html>

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容，大家可以自己實(shí)踐后看下效果，這樣更利于大家的理解和學(xué)習(xí)，希望本文對(duì)大家學(xué)習(xí)或使用AngularJS能有所幫助。如果有疑問(wèn)可以留言交流，謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

  • angular6.0使用教程之父組件通過(guò)url傳遞id給子組件的方法

    angular6.0使用教程之父組件通過(guò)url傳遞id給子組件的方法

    這篇文章主要介紹了angular6.0使用教程之父組件通過(guò)url傳遞id給子組件的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-06-06
  • Angularjs之filter過(guò)濾器(推薦)

    Angularjs之filter過(guò)濾器(推薦)

    這篇文章主要介紹了Angularjs之filter過(guò)濾器的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2016-11-11
  • cnpm加速Angular項(xiàng)目創(chuàng)建的方法

    cnpm加速Angular項(xiàng)目創(chuàng)建的方法

    這篇文章主要介紹了cnpm加速Angular項(xiàng)目創(chuàng)建的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Angular+Node生成隨機(jī)數(shù)的方法

    Angular+Node生成隨機(jī)數(shù)的方法

    這篇文章主要介紹了Angular+Node生成隨機(jī)數(shù)的方法,結(jié)合具體實(shí)例分析了Angular與Node結(jié)合控制前后端實(shí)現(xiàn)隨機(jī)數(shù)功能的相關(guān)操作技巧,需要的朋友可以參考下
    2017-06-06
  • AngularJS ng-table插件設(shè)置排序

    AngularJS ng-table插件設(shè)置排序

    這篇文章主要介紹了AngularJS ng-table插件設(shè)置排序的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • AngularJS中update兩次出現(xiàn)$promise屬性無(wú)法識(shí)別的解決方法

    AngularJS中update兩次出現(xiàn)$promise屬性無(wú)法識(shí)別的解決方法

    最近在工作中用AngularJS中update了兩次之后發(fā)現(xiàn)$promise屬性無(wú)法識(shí)別了，后來(lái)通過(guò)查找相關(guān)的資料終于解決了，想著記錄下方便自己或者有需要的朋友，所以本文主要介紹了AngularJS中update兩次出現(xiàn)了$promise屬性無(wú)法識(shí)別的解決方法,需要的朋友可以參考借鑒。
    2017-01-01
  • AnjularJS中$scope和$rootScope的區(qū)別小結(jié)

    AnjularJS中$scope和$rootScope的區(qū)別小結(jié)

    這篇文章給大家整理了關(guān)于AnjularJS中$scope和$rootScope的區(qū)別，文中運(yùn)用實(shí)例代碼介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
    2016-09-09
  • 讓angularjs支持瀏覽器自動(dòng)填表

    讓angularjs支持瀏覽器自動(dòng)填表

    簡(jiǎn)單來(lái)說(shuō)Angular.js是google開發(fā)者設(shè)計(jì)和開發(fā)的一套前端開發(fā)框架，幫助你簡(jiǎn)化前端開發(fā)的負(fù)擔(dān)。當(dāng)然，這里有很多其它的前端開發(fā)框架，但是如何選擇合適的前端框架對(duì)于我們這些開發(fā)人員來(lái)說(shuō)就不是那么容易了！
    2014-11-11
  • angularJS結(jié)合canvas畫圖例子

    angularJS結(jié)合canvas畫圖例子

    這篇文章主要介紹了angularJS結(jié)合canvas畫圖例子的方法,需要的朋友可以參考下
    2015-02-02
  • 詳解angularJS+Ionic移動(dòng)端圖片上傳的解決辦法

    詳解angularJS+Ionic移動(dòng)端圖片上傳的解決辦法

    本篇文章主要介紹了詳解angularJS+Ionic移動(dòng)端圖片上傳的解決辦法 ，具有一定的參考價(jià)值，有需要的可以了解一下
    2017-09-09

最新評(píng)論