效果图
实例代码
<! doctype html> <html lang = "en" ng-app = "myapp" ng-controller = "myctrl"> <head> <meta charset = "utf-8"> <title> ชื่อเรื่อง </title> <style> *{margin: 0; list-style: none; font-size: 12px;} .clearfix {overflow: hidden; display: block; clear: ทั้งสอง} .clearfix: หลังจาก {zoom: 1} .Relation {margin-top: 7px; font: 14px/38px "微软雅黑"; ความสูง: 38px; ความเป็นมา: #F8F8F8; Padding-Left: 26px; สี: #666;} .Relation li {margin-top: 5px; float: ซ้าย; padding-left: 50px; เคอร์เซอร์: ตัวชี้; การกำหนดข้อความ: double} .relation li: hover {color: #f00}; .tableMain li {float: ซ้าย; การเติม: 5px 10px; ความกว้าง: 50px} .ullist1 li.num39 {width: 39px; ความสูง: 36px; จุดสูง: 36px; TEXT-ALIGN: CENTER; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULLIST1 LI.NUM73 {WIDTH: 73PX; ความสูง: 36px; จุดสูง: 36px; TEXT-ALIGN: CENTER; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULLIST1 LI.NUM85 {WIDTH: 85PX; ความสูง: 36px; ความสูงของสาย: 36px; TEXT-ALIGN: CENTER; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULLIST1 LI.NUM114 {WIDTH: 140PX; ความสูง: 36px; จุดสูง: 36px; TEXT-ALIGN: CENTER; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULLIST1 LI.NUM122 {WIDTH: 170PX; ความสูง: 36px; จุดสูง: 36px; TEXT-ALIGN: CENTER; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ullist1 li.Num167 {Width: 180px; ความสูง: 36px; จุดสูง: 36px; TEXT-ALIGN: CENTER; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ullist1 li.Num185 {Width: 185px; ความสูง: 36px; จุดสูง: 36px; TEXT-ALIGN: CENTER; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULLIST1 LI.NUM70 {WIDTH: 70PX; ความสูง: 36PX; LINE-HEIGHT: 36PX; TEXT-ALIGN: CENTER; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ullist1 li.Num103 {width: 183px; ความสูง: 36px; จุดสูง: 36px; TEXT-ALIGN: CENTER; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULLIST1 LI.NUM97 {WIDTH: 160PX; ความสูง: 36px; จุดสูง: 36px; TEXT-ALIGN: CENTER; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULCONTER1 LI.NUM39 {WIDTH: 39PX; ความสูง: 42PX; ความสูงของสาย: 42px; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULCONTER1 LI.NUM73 {WIDTH: 73PX; ความสูง: 42px; ความสูงของสาย: 42px; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULCONTER1 LI.NUM85 {WIDTH: 85PX; ความสูง: 42px; ความสูงของสาย: 42px; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULCONTER1 LI.NUM114 {WIDTH: 140PX; ความสูง: 42px; ความสูงของสาย: 42px; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULCONTER1 LI.NUM122 {WIDTH: 170PX; ความสูง: 42px; ความสูงของสาย: 42px; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULCONTER1 LI.NUM167 {WIDTH: 180PX; ความสูง: 42px; ความสูงของสาย: 42px; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULCONTER1 LI.NUM185 {WIDTH: 185PX; ความสูง: 42px; ความสูงของสาย: 42px; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULCONTER1 LI.NUM70 {WIDTH: 70PX; ความสูง: 42px; ความสูงของสาย: 42px; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULCONTER1 LI.NUM103 {WIDTH: 183PX; ความสูง: 42px; ความสูงของสาย: 42px; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULCONTER1 LI.NUM97 {WIDTH: 160PX; ความสูง: 42px; ความสูงของสาย: 42px; ลอย: ซ้าย; Border-Right: 1px Solid #DDD;} .ULCONTER1 LI.NUM39 อินพุต {WIDTH: 19PX; ความสูง: 19px; มาร์จิ้น: 11px; ชายแดน: 1px Solid #DDD; } .ULCONTER1 LI.NUM73 อินพุต {WIDTH: 68PX; ชายแดน: 1px Solid #DDD; มาร์จิ้น: 2px; ความสูงบรรทัด: 32px; ความสูง: 32px;} .ulconter1 li.num85 อินพุต {width: 80px; ชายแดน: 1px Solid #DDD; มาร์จิ้น: 2px; ความสูงบรรทัด: 32px; ความสูง: 32px;} .ulconter1 li.num114 อินพุต {width: 135px; ชายแดน: 1px Solid #DDD; มาร์จิ้น: 2px; ความสูงบรรทัด: 32px; ความสูง: 32px;} .ulconter1 li.num122 อินพุต {ความกว้าง: 165px; ชายแดน: 1px Solid #DDD; มาร์จิ้น: 2px; ความสูงบรรทัด: 32px; ความสูง: 32px;} .ulconter1 li.num167 อินพุต {width: 175px; ชายแดน: 1px Solid #DDD; มาร์จิ้น: 2px; ความสูงบรรทัด: 32px; ความสูง: 32px;} .ulconter1 li.num185 อินพุต {width: 180px; ชายแดน: 1px Solid #DDD; มาร์จิ้น: 2px; ความสูงบรรทัด: 32px; ความสูง: 32px;} .ulconter1 li.num70 อินพุต {width: 65px; ชายแดน: 1px Solid #DDD; มาร์จิ้น: 2px; ความสูงบรรทัด: 32px; ความสูง: 32px;} .ulconter1 li.num103 อินพุต {width: 178px; ชายแดน: 1px Solid #DDD; มาร์จิ้น: 2px; ความสูงบรรทัด: 32px; ความสูง: 32px;} .ulconter1 li.num97 อินพุต {width: 150px; ชายแดน: 1px Solid #DDD; มาร์จิ้น: 2px; ความสูงบรรทัด: 32px; ความสูง: 32px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> ng-click = "อื่น ๆ . delecontact ()"> 删除 </li> <li ng-click = "others.moveup ()"> 上移 </li> <li ng-click = "others.movedown ()"> 下移 </li> </ul> <li> 移动电话 </li> <li> qq </li> <li> Skype </li> <li> 电子邮件 </li> </ol> <ul ng-repeat = "รายการในรายการ"> <li> <อินพุต type = "Radio" ng-click = "รายการอื่น ๆ <li> <อินพุต type = "text" ng-model = "item.otherbusinesstel"> </li> <li> <อินพุต type = "text" ng-model = "item.othermobphone"> </li> <li> <li> <อินพุต type = "text" ng-model = "item.otheremail"> </li> </ul> </div> <script> angular.module ('myapp', []). คอนโทรลเลอร์ ('myctrl', ฟังก์ชั่น ($ scope) {$ scope.items = []; this.electedItem = item;}, // 增加 addContact: function () {$ scope.items.push ({othercontact: ' // 除； delecontact: function () {var index = $ scope.items.indexof (this.selectedItem); if (index == 0) {Alert ('已是第一了， 不能再向上移了！'); if (index == $ scope.items.length-1) {Alert ('已是最後一了， 不能再向下移了！'); }}) </script> </body> </html>总结
以上就是这篇文章的全部内容， 大家可以自己实践后看下效果， 这样更利于大家的理解和学习， 希望本文对大家学习或使用 Angularjs 能有所帮助。如果有疑问可以留言交流， 谢谢大家对武林网的支持。