效果图
实例代码
<! doctype html> <html lang = "en" ng-app = "myapp" ng-controller = "myctrl"> <head> <meta charset = "utf-8"> <title> title </title> <style> *{margin: 0 ؛ padding: 0 ؛ قائمة القائمة: لا شيء ؛ الحجم font: 12px ؛} .clearfix {overflow: hidden ؛ display: block ؛ clear: كلاهما} .clearfix: بعد {Zoom: 1} .Relation {margin-top: 7px ؛ font: 14px/38px "微软雅黑" ؛ الارتفاع: 38 بكسل ؛ الخلفية: #f8f8f8 ؛ حشو اليسار: 26 بكسل ؛ اللون: #666 ؛}. الترابط 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 ؛ رفع الخط: 36 بكسل ؛ محاذاة النص: المركز ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ullist1 li.num73 {width: 73px ؛ الارتفاع: 36px ؛ رفع الخط: 36 بكسل ؛ محاذاة النص: المركز ؛ تعويم: اليسار. الحدود اليمين: 1PX Solid #DDD ؛} .ullist1 li.num85 {width: 85px ؛ الارتفاع: 36 بكسل ؛ رفع الخط: 36 بكسل ؛ محاذاة النص: المركز ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ullist1 li.num114 {width: 140px ؛ الارتفاع: 36px ؛ رفع الخط: 36 بكسل ؛ محاذاة النص: المركز ؛ تعويم: اليسار. اليمين الحدودي: 1px solid #ddd ؛} .ullist1 li.num122 {width: 170px ؛ الارتفاع: 36px ؛ رفع الخط: 36 بكسل ؛ محاذاة النص: المركز ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ullist1 li.num167 {width: 180px ؛ الارتفاع: 36px ؛ رفع الخط: 36 بكسل ؛ محاذاة النص: المركز ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ullist1 li.num185 {width: 185px ؛ الارتفاع: 36px ؛ رفع الخط: 36 بكسل ؛ محاذاة النص: المركز ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ullist1 li.num70 {width: 70px ؛ الارتفاع: 36px ؛ خط الارتفاع: 36px ؛ محاذاة النص: المركز ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ullist1 li.num103 {width: 183px ؛ الارتفاع: 36px ؛ رفع الخط: 36 بكسل ؛ محاذاة النص: المركز ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ullist1 li.num97 {width: 160px ؛ الارتفاع: 36px ؛ رفع الخط: 36 بكسل ؛ محاذاة النص: المركز ؛ تعويم: اليسار. الحدود اليمين: 1px الصلبة #DDD ؛} .ulconter1 li.num39 {width: 39px ؛ الارتفاع: 42px ؛ Line-Leight: 42px ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ulconter1 li.num73 {width: 73px ؛ الارتفاع: 42 بكسل ؛ Line-Leight: 42px ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ulconter1 li.num85 {width: 85px ؛ الارتفاع: 42 بكسل ؛ Line-Leight: 42px ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ulconter1 li.num114 {width: 140px ؛ الارتفاع: 42 بكسل ؛ Line-Leight: 42px ؛ تعويم: اليسار. الحدود اليمين: 1px الصلبة #DDD ؛} .ulconter1 li.num122 {width: 170px ؛ الارتفاع: 42 بكسل ؛ Line-Leight: 42px ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ulconter1 li.num167 {width: 180px ؛ الارتفاع: 42 بكسل ؛ Line-Leight: 42px ؛ تعويم: اليسار. الحدود اليمين: 1PX Solid #DDD ؛} .ulconter1 li.num185 {width: 185px ؛ الارتفاع: 42 بكسل ؛ Line-Leight: 42px ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ulconter1 li.num70 {width: 70px ؛ الارتفاع: 42 بكسل ؛ Line-Leight: 42px ؛ تعويم: اليسار. اليمين الحدودي: 1px Solid #DDD ؛} .ulconter1 li.num103 {width: 183px ؛ الارتفاع: 42 بكسل ؛ Line-Leight: 42px ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ulconter1 li.num97 {width: 160px ؛ الارتفاع: 42 بكسل ؛ Line-Leight: 42px ؛ تعويم: اليسار. الحدود اليمين: 1px Solid #DDD ؛} .ulconter1 li.num39 input {width: 19px ؛ الارتفاع: 19px ؛ الهامش: 11px ؛ الحدود: 1 بكسل Solid #DDD ؛ } .ulconter1 li.num73 input {width: 68px ؛ الحدود: 1 بكسل Solid #DDD ؛ الهامش: 2px ؛ خط الارتفاع: 32 بكسل ؛ الارتفاع: 32px ؛} .ulconter1 li.num85 input {width: 80px ؛ الحدود: 1 بكسل Solid #DDD ؛ الهامش: 2px ؛ خط الارتفاع: 32 بكسل ؛ الارتفاع: 32px ؛} .ulconter1 li.num114 إدخال {width: 135px ؛ الحدود: 1 بكسل Solid #DDD ؛ الهامش: 2px ؛ خط الارتفاع: 32 بكسل ؛ الارتفاع: 32px ؛} .ulconter1 li.num122 input {width: 165px ؛ الحدود: 1 بكسل Solid #DDD ؛ الهامش: 2px ؛ خط الارتفاع: 32 بكسل ؛ الارتفاع: 32px ؛} .ulconter1 li.num167 INPUT {width: 175px ؛ الحدود: 1 بكسل Solid #DDD ؛ الهامش: 2px ؛ خط الارتفاع: 32 بكسل ؛ الارتفاع: 32px ؛} .ulconter1 li.num185 إدخال {width: 180px ؛ الحدود: 1 بكسل Solid #DDD ؛ الهامش: 2px ؛ خط الارتفاع: 32 بكسل ؛ الارتفاع: 32px ؛} .ulconter1 li.num70 input {width: 65px ؛ الحدود: 1 بكسل Solid #DDD ؛ الهامش: 2px ؛ خط الارتفاع: 32 بكسل ؛ الارتفاع: 32px ؛} .ulconter1 li.num103 input {width: 178px ؛ الحدود: 1 بكسل Solid #DDD ؛ الهامش: 2px ؛ خط الارتفاع: 32 بكسل ؛ الارتفاع: 32px ؛} .ulconter1 li.num97 input {width: 150px ؛ الحدود: 1 بكسل Solid #DDD ؛ الهامش: 2px ؛ خط الارتفاع: 32 بكسل ؛ الارتفاع: 32px ؛} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <ul> <li nglick = "others.addcontact () ng-click = "others.deleContact ()"> 删除 </li> <li nglick = "others.moveup ()"> 上移 </li> <li> 移动电话 </li> <li> qq </li> <li> skype </li> <li> 电子邮件 </li> </ol> <ul ng-repeat = "item in heads"> <li> <input type = "radio" ng-click = "others <li> <input type = "text" ng-model = "item.OtherBusinessTel"> </li> <li> <input type = "text" ng-model = "item.OtherMobphone"> </li> <li> <li> <li> <input type = "text" ng-model = "item.OtherEmail"> </li> </ul> </viv> <script> Angular.module ('myapp' ، []). controller ('myctrl' ، function ($ scope) {$ scope.items = [] this.selected = item ؛ // 除； deleContact: {var index = دولار if (index == 0) {alert ('已是第一了 不能再向上移了！') ؛ if ($ scope.length-1) {تنبيه (已是最後一了 ， 不能再向下移了！) ؛ }}) </script> </body> </html>总结
以上就是这篇文章的全部内容 ， 大家可以自己实践后看下效果 这样更利于大家的理解和学习 ， 希望本文对大家学习或使用 希望本文对大家学习或使用 angularjs 能有所帮助。如果有疑问可以留言交流 ， 谢谢大家对武林网的支持。