效果图
实例代码
<! Doctype html> <html lang = "en" ng-app = "myapp" ng-controller = "myctrl"> <éad> <meta charset = "utf-8"> <tapie> title </ title> <style> * {margin: 0; padding: 0; Style de liste: Aucun; Font-Size: 12px;} .ClearFix {Overflow: Hidden; Affichage: Block; Clear: à la fois} .ClEARFIX: After {Zoom: 1} .relation {margin-top: 7px; font: 14px / 38px "微软雅黑"; hauteur: 38px; Contexte: # f8f8f8; Padding-Left: 26px; Couleur: # 666;} .relation li {margin-top: 5px; float: gauche; padding-left: 50px; curseur: pointeur; text-décoration: double} .relation li: hover {couleur: # f00}; .TableMain li {float: gauche; padding: 5px 10px; largeur: 50px} .ullist1 li.num39 {width: 39px; Hauteur: 36px; HEUGHE LINE: 36PX; Texte-aligne: Centre; flottant: à gauche; Border-droite: 1px solide #ddd;} .ullist1 li.num73 {width: 73px; Hauteur: 36px; HEUGHE LINE: 36PX; Texte-aligne: Centre; flottant: à gauche; Border-droite: 1px solide #ddd;} .ullist1 li.num85 {width: 85px; hauteur: 36px; hauteur de ligne: 36px; Texte-aligne: Centre; flottant: à gauche; Border-droite: 1px solide #ddd;} .ullist1 li.num114 {width: 140px; Hauteur: 36px; HEUGHE LINE: 36PX; Texte-aligne: Centre; flottant: à gauche; Border-droite: 1px solide #ddd;} .ullist1 li.num122 {width: 170px; Hauteur: 36px; HEUGHE LINE: 36PX; Texte-aligne: Centre; flottant: à gauche; Border-droite: 1px solide #ddd;} .ullist1 li.num167 {width: 180px; Hauteur: 36px; HEUGHE LINE: 36PX; Texte-aligne: Centre; flottant: à gauche; Border-droite: 1px solide #ddd;} .ullist1 li.num185 {width: 185px; Hauteur: 36px; HEUGHE LINE: 36PX; Texte-aligne: Centre; flottant: à gauche; Border-droite: 1px solide #ddd;} .ullist1 li.num70 {largeur: 70px; hauteur: 36px; line-height: 36px; Texte-aligne: Centre; flottant: à gauche; Border-droite: 1px solide #ddd;} .ullist1 li.num103 {width: 183px; Hauteur: 36px; HEUGHE LINE: 36PX; Texte-aligne: Centre; flottant: à gauche; Border-droite: 1px solide #ddd;} .ullist1 li.num97 {width: 160px; Hauteur: 36px; HEUGHE LINE: 36PX; Texte-aligne: Centre; flottant: à gauche; Border-droite: 1px solide #ddd;} .ulconter1 li.num39 {width: 39px; hauteur: 42px; hauteur de ligne: 42px; flottant: à gauche; Border-droite: 1px solide #ddd;} .ulConter1 li.num73 {width: 73px; hauteur: 42px; hauteur de ligne: 42px; flottant: à gauche; Border-droite: 1px solide #ddd;} .ulConter1 li.num85 {width: 85px; hauteur: 42px; hauteur de ligne: 42px; flottant: à gauche; bordure-droite: 1px solide #ddd;} .ulConter1 li.num114 {width: 140px; hauteur: 42px; hauteur de ligne: 42px; flottant: à gauche; Border-droite: 1px solide #ddd;} .ulConter1 li.num122 {width: 170px; hauteur: 42px; hauteur de ligne: 42px; flottant: à gauche; Border-droite: 1px solide #ddd;} .ulconter1 li.num167 {width: 180px; hauteur: 42px; hauteur de ligne: 42px; flottant: à gauche; Border-droite: 1px solide #ddd;} .ulconter1 li.num185 {width: 185px; hauteur: 42px; hauteur de ligne: 42px; flottant: à gauche; Border-droite: 1px solide #ddd;} .ulConter1 li.num70 {width: 70px; hauteur: 42px; hauteur de ligne: 42px; flottant: à gauche; Border-droite: 1px solide #ddd;} .ulConter1 li.num103 {width: 183px; hauteur: 42px; hauteur de ligne: 42px; flottant: à gauche; bordure-droite: 1px solide #ddd;} .ulConter1 li.num97 {width: 160px; hauteur: 42px; hauteur de ligne: 42px; flottant: à gauche; Border-droite: 1px solide #ddd;} .ulconter1 li.num39 entrée {width: 19px; hauteur: 19px; marge: 11px; Border: 1px solide #ddd; } .ulconter1 li.num73 entrée {largeur: 68px; Border: 1px solide #ddd; marge: 2px; height line: 32px; Hauteur: 32px;} .ulconter1 li.num85 entrée {width: 80px; Border: 1px solide #ddd; marge: 2px; height line: 32px; hauteur: 32px;} .ulConter1 li.num114 entrée {largeur: 135px; Border: 1px solide #ddd; marge: 2px; height line: 32px; hauteur: 32px;} .ulConter1 li.num122 entrée {largeur: 165px; Border: 1px solide #ddd; marge: 2px; height line: 32px; Hauteur: 32px;} .ulconter1 li.num167 entrée {largeur: 175px; Border: 1px solide #ddd; marge: 2px; height line: 32px; Hauteur: 32px;} .ulConter1 li.num185 entrée {largeur: 180px; Border: 1px solide #ddd; marge: 2px; height line: 32px; hauteur: 32px;} .ulConter1 li.num70 entrée {largeur: 65px; Border: 1px solide #ddd; marge: 2px; height line: 32px; Hauteur: 32px;} .ulconter1 li.num103 entrée {largeur: 178px; Border: 1px solide #ddd; marge: 2px; height line: 32px; hauteur: 32px;} .ulConter1 li.num97 entrée {width: 150px; Border: 1px solide #ddd; marge: 2px; height line: 32px; Hauteur: 32px;} </ style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script> </ head> <body> <ul> <li ng-click = "autres ng-Click = "autres.deleContact ()"> 删除 </li> <li ng-click = "autres.moveup ()"> 上移 </li> <li> <divtablemain ""> <h> </li> </li> <li> <li> 移动电话 </li> <li> qq </li> <li> skype </li> <li> 电子邮件 </li> </l> <ul ng-repeat = "item in items"> <li> <entrée type = "radio" ng-Click = "autres.selected (item)" name = "select"> </li> <preny type = "text" ng-mod) " </li> <li> <entrée type = "text" ng-model = "item.otherBusinesstel"> </li> <li> <entrée type = "Text" ng-model = "item.othermobphone"> </li> <li> <entrée = "Text" ng-model = "item.otherqq"> </li> <li> <entrée type = "Text" ng-model = "item. </li> <li> <entrée type = "text" ng-model = "item.otheremail"> </li> </ul> </div> <script> angular.module ('myApp', []). Controller ('myctrl', function ($ scope) {$ scope.items = []; $ scope.others = {selectedItem: {}, alemed: item (item) {item) { this.selectedItem = item;}, // 增加 addContact: function () {$ scope.items.push ({autreContact: '', autres axés // 除； Delecontact: fonction () {var index = $ scope.items.Indexof (this.selectedItem); if (index == 0) {alerte ('已是第一了 ， 不能再向上移了！'); if (index == $ scope.items.length-1) {alert ('已是最後一了 ， 不能再向下移了！'); }}) </cript> </ body> </html>总结
以上就是这篇文章的全部内容 ， 大家可以自己实践后看下效果 ， 这样更利于大家的理解和学习 ， 希望本文对大家学习或使用 Angularjs 能有所帮助。如果有疑问可以留言交流 ， 谢谢大家对武林网的支持。