效果图
实例代码
<！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>总结
以上就是这篇文章的全部内容，大家可以自己实践后看下效果，这样更利于大家的理解和学习