效果圖
實例代碼
<！ doctype html> <html lang =“ en” ng-app =“ myApp” ng-controller =“ myctrl”> <head> <head> <meta charset =“ utf-8”> <title> </title> </title> title> </title> </title> <style>列表風格：無; font-size：12px;} .clearfix {溢出：隱藏; display：block; clear; clear; clear} .clearfix：efter {Zoom：1} .relation {margin-top：7px; font; font; font; font：14px/14px/38px';身高：38px;背景：＃f8f8f8;左填充：26px;顏色：＃666;} .Relation li {margin-top：5px; float：left; padding-left：50px; cursor：cursor：pointer; pointer; text-decoration：double}。 double} .relation li：hover li：hover {color {color：＃f00}; 。身高：36px;線高：36px;文字平衡：中心；浮子：左；邊界右：1px實心#ddd;} .ullist1 li.num73 {width：73px;身高：36px;線高：36px;文字平衡：中心；浮子：左；邊界右：1px實心#ddd;} .ullist1 li.num85 {width：85px;身高：36px;線高：36px;文字平衡：中心；浮子：左；邊界權利：1px實心#ddd;} .ullist1 li.num114 {width：140px;身高：36px;線高：36px;文字平衡：中心；浮子：左；邊界右：1px固體#ddd;} .ullist1 li.num122 {width：170px;身高：36px;線高：36px;文字平衡：中心；浮子：左；邊界權利：1px固體#ddd;} .ullist1 li.num167 {width：180px;身高：36px;線高：36px;文字平衡：中心；浮子：左；邊界右：1px實心#ddd;} .ullist1 li.num185 {width：185px;身高：36px;線高：36px;文字平衡：中心；浮子：左；邊界右：1px實心#DDD;} .ullist1 li.num70 {width：70px;高度：36px; line-height：36px;文字平衡：中心；浮子：左；邊界右：1px固體#ddd;} .ullist1 li.num103 {width：183px;身高：36px;線高：36px;文字平衡：中心；浮子：左；邊界右：1px實心#ddd;} .ullist1 li.num97 {width：160px;身高：36px;線高：36px;文字平衡：中心；浮子：左；邊界右：1px實心#DDD;} .ulConter1 li.num39 {width：39px;高度：42px;線高：42px;浮子：左；邊界右：1px實心#DDD;} .ulConter1 li.num73 {width：73px;身高：42px;線高：42px;浮子：左；邊界右：1px實心#DDD;} .ulConter1 li.num85 {width：85px;身高：42px;線高：42px;浮子：左；邊界右：1px實心#DDD;} .ulConter1 li.num114 {width：140px;身高：42px;線高：42px;浮子：左；邊界右：1px固體#ddd;} .ulConter1 li.num122 {width：170px;身高：42px;線高：42px;浮子：左；邊界右：1px實心#DDD;} .ulConter1 li.num167 {width：180px;身高：42px;線高：42px;浮子：左；邊界右：1px實心#DDD;} .ulConter1 li.num185 {width：185px;身高：42px;線高：42px;浮子：左；邊界右：1px固體#ddd;} .ulConter1 li.num70 {width：70px;身高：42px;線高：42px;浮子：左；邊界右：1px固體#ddd;} .ulConter1 li.num103 {width：183px;身高：42px;線高：42px;浮子：左；邊界右：1px固體#ddd;} .ulConter1 li.num97 {width：160px;身高：42px;線高：42px;浮子：左；邊界右：1px實心#DDD;} .ulConter1 li.num39輸入{width：19px;身高：19px;保證金：11px;邊界：1px實心#DDD; } .ulConter1 li.num73輸入{width：68px;邊界：1px實心#DDD;保證金：2px;線路高：32px;高度：32px;} .ulConter1 li.num85輸入{width：80px;邊界：1px實心#DDD;保證金：2px;線路高：32px;高度：32px;} .ulConter1 li.num114輸入{width：135px;邊界：1px實心#DDD;保證金：2px;線路高：32px;高度：32px;} .ulConter1 li.num122輸入{width：165px;邊界：1px實心#DDD;保證金：2px;線路高：32px;高度：32px;} .ulConter1 li.num167輸入{width：175px;邊界：1px實心#DDD;保證金：2px;線路高：32px;高度：32px;} .ulConter1 li.num185輸入{width：180px;邊界：1px實心#DDD;保證金：2px;線路高：32px;高度：32px;} .ulConter1 li.num70輸入{width：65px;邊界：1px實心#DDD;保證金：2px;線路高：32px;高度：32px;} .ulConter1 li.num103輸入{width：178px;邊界：1px實心#DDD;保證金：2px;線路高：32px;高度：32px;} .ulConter1 li.num97輸入{width：150px;邊界：1px實心#DDD;保證金：2px;線路高：32px;身高：32px;} </style> <script src =“ http://apps.bdimg.com/libs/angular.js/1.4.46/angular.min.js”> ng-click =“ ershos.delecontact（）”>刪除</li> <li ng-click =“ ersome.moveup（）”>上移</li> </li> <li ng-click =“ shosers.movedown（） <li> </li> <li> qq </li> <li> Skype </li> <li> </li> </li> </li> </ol> <ul ng-repeat =“ interm in items”> <li> <li> <li> <input type type type type type type type type tye ng-click =“ ng-click =” ne> selected（selected（item） </li> <li> <input type =“ text” ng-model =“ item.otherbusinesstel”> </li> <li> <input type type type =“ text” ng-model =“ item.othermobphone”> </li> </li> <li> <輸入type type type type type type type type =“ ng-model =“ item.OthortsKype”> </li> <li> <input type =“ text” text“ ng-model =“ item.temail”> </li> </li> </ul> </ul> </div> </div> <script> angular.module（'myApp'，'myapp'，[]，[]。 selectedItem：{}，selected：function（item）{this.selectedItem = item;}，//增加add addContact：function（）{$ scope.items.push（{othercontact：{otherContact：''''，其他businesstel：'''其他：'' tmp = copy（$ scope.items [index-1]）; index = $ scope.items.indexof（this.selectedem）; $ scope.items [index] = tmp;}}}）</script> </body> </html>總結
以上就是這篇文章的全部內容，大家可以自己實踐後看下效果，這樣更利於大家的理解和學習