效果图
实例代码
<！doctype html> <html lang = "en" ng-app = "myapp" ng-controller = "myctrl"> <head> <meta charset = "utf-8"> <title> title> *{margin：0; padding：0;リストスタイル：なし; font-size：12px;} .clearfix {overflow：hidden; display：block; clear：blote} .clearfix：afte {zoom：1} .relation {margin-top：7px; font：14px/38px "微软雅黑";高さ：38px;背景：＃f8f8f8;パディング左：26px;色：＃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;高さ：36px; Line-Height：36px;テキストアライグ：センター;フロート：左; Border-Right：1PX Solid #DDD;} .ullist1 li.num73 {width：73px;高さ：36px; Line-Height：36px;テキストアライグ：センター;フロート：左; Border-Right：1PX Solid #DDD;} .ullist1 li.num85 {width：85px;高さ：36px;ラインハイト：36px;テキストアライグ：センター;フロート：左; Border-Right：1PX Solid #DDD;} .ullist1 Li.Num114 {width：140px;高さ：36px; Line-Height：36px;テキストアライグ：センター;フロート：左; Border-Right：1PX Solid #DDD;} .ullist1 li.num122 {width：170px;高さ：36px; Line-Height：36px;テキストアライグ：センター;フロート：左; Border-Right：1PX Solid #DDD;} .ullist1 li.num167 {width：180px;高さ：36px; Line-Height：36px;テキストアライグ：センター;フロート：左; Border-Right：1PX Solid #DDD;} .ullist1 li.num185 {width：185px;高さ：36px; Line-Height：36px;テキストアライグ：センター;フロート：左; Border-Right：1PX Solid #DDD;} .ullist1 li.num70 {width：70px; height：36px; line-height：36px;テキストアライグ：センター;フロート：左; Border-Right：1PX Solid #DDD;} .ullist1 li.num103 {width：183px;高さ：36px; Line-Height：36px;テキストアライグ：センター;フロート：左; Border-Right：1PX Solid #DDD;} .ullist1 li.num97 {width：160px;高さ：36px; Line-Height：36px;テキストアライグ：センター;フロート：左; Border-Right：1PX Solid #DDD;} .ulconter1 li.num39 {width：39px; height：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 input {width：19px;高さ：19px;マージン：11px;境界線：1px solid #ddd; } .ulconter1 li.num73 input {width：68px;境界線：1px solid #ddd;マージン：2px; Line-Height：32px;高さ：32px;} .ulconter1 li.num85 input {width：80px;境界線：1px solid #ddd;マージン：2px; Line-Height：32px;高さ：32px;} .ulconter1 li.num114 input {width：135px;境界線：1px solid #ddd;マージン：2px; Line-Height：32px;高さ：32px;} .ulconter1 li.num122 input {width：165px;境界線：1px solid #ddd;マージン：2px; Line-Height：32px;高さ：32px;} .ulconter1 li.num167 input {width：175px;境界線：1px solid #ddd;マージン：2px; Line-Height：32px;高さ：32px;} .ulconter1 li.num185 input {width：180px;境界線：1px solid #ddd;マージン：2px; Line-Height：32px;高さ：32px;} .ulconter1 li.num70 input {width：65px;境界線：1px solid #ddd;マージン：2px; Line-Height：32px;高さ：32px;} .ulconter1 li.num103 input {width：178px;境界線：1px solid #ddd;マージン：2px; Line-Height：32px;高さ：32px;} .ulconter1 li.num97 input {width：150px;境界線：1px solid #ddd;マージン：2px; Line-Height：32px;高さ：32px;} </style> <スクリプトsrc = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> <body> <body> <ul> <li ng-click = "others.addcontact（ ng-click = "others.delecontact（）">删除</li> <li ng-click = "others.moveup（）">上移</li> <li ng-click = "others.movedown（）">下移</li> </ul> <divtablemain "" "> <ol> <li>移动电话</li> <li> qq </li> <li> skype </li> <li> </li> </ol> <ul ng-repeat = "アイテムのアイテム"> <li> <入力タイプ= "radio" ng-click = "others.selected（アイテム）" name = "select"> <li> <li> <li> <li> <li> <li> <li> <li> <li> <in < <li> <入力タイプ= "text" ng-model = "item.otherbusinesstel"> </li> <li> <入力タイプ= "ng-model =" item.text.otermobphone "> </li> <li> <入力タイプ=" ng-model = "item.otherqq"> </li> <input " <li> <入力タイプ= "text" ng-model = "iter.oteremail"> </li> </ul> </div> <script> angular.module（ 'myapp'、[]））。 this.selectedItem = item}、// addcontact：function（）{$ scope.items.push（{othercontact： ''、othermobphone： ''、otherqq： ''、otherkype： ''、otheremail： ''、otherddressdress： '、 }、// delcontact（）{var index = $ scope.Indexof（this.selectedItem）; if（ '已是第一了、不能再向上移了！'）; if == scope.items.length-1） }}）</script> </body> </html>总结
以上就是这篇文章的全部内容、大家可以自己实践后看下效果、这样更利于大家的理解和学习、希望本文对大家学习或使用angularjs能有所帮助。如果有疑问可以留言交流、谢谢大家对武林网的支持。