效果图
实例代码
<! DocType html> <html lang = "en" ng-app = "myApp" ng-concontroller = "myctrl"> <head> <meta charset = "utf-8"> <title> title </title> <style> *{margin: 0; remar: 0; list-style: none; font-size: 12px;} .clearfix {Overflow: Hidden; Display: Block; Clear: Amby} .Clearfix: After {Zoom: 1} .relation {margin-top: 7px; font: 14px/38px "微软雅黑"; Altura: 38px; Antecedentes: #F8F8F8; ROLED-LEFUNTO: 26px; Color: #666;} .relation li {margin-top: 5px; float: izquierda; relleno-izquierda: 50px; cursor: pointer; text-decoración: doble} .relación li: hover {color: #f00}; .tablemain li {float: izquierda; relleno: 5px 10px; ancho: 50px} .ullist1 li.num39 {ancho: 39px; Altura: 36px; Línea de altura: 36px; Text-Align: Center; flotante: izquierda; border-right: 1px solid #ddd;} .ullist1 li.num73 {ancho: 73px; Altura: 36px; Línea de altura: 36px; Text-Align: Center; flotante: izquierda; border-right: 1px solid #ddd;} .ullist1 li.num85 {ancho: 85px; Altura: 36px; Línea de altura: 36px; Text-Align: Center; flotante: izquierda; border-right: 1px solid #ddd;} .ullist1 li.num114 {ancho: 140px; Altura: 36px; Línea de altura: 36px; Text-Align: Center; flotante: izquierda; border-right: 1px solid #ddd;} .ullist1 li.num122 {ancho: 170px; Altura: 36px; Línea de altura: 36px; Text-Align: Center; flotante: izquierda; border-right: 1px solid #ddd;} .ullist1 li.num167 {ancho: 180px; Altura: 36px; Línea de altura: 36px; Text-Align: Center; flotante: izquierda; border-right: 1px solid #ddd;} .ullist1 li.num185 {ancho: 185px; Altura: 36px; Línea de altura: 36px; Text-Align: Center; flotante: izquierda; border-right: 1px solid #ddd;} .ullist1 li.num70 {ancho: 70px; altura: 36px; line-HEight: 36px; Text-Align: Center; flotante: izquierda; border-right: 1px solid #ddd;} .ullist1 li.num103 {ancho: 183px; Altura: 36px; Línea de altura: 36px; Text-Align: Center; flotante: izquierda; border-right: 1px solid #ddd;} .ullist1 li.num97 {ancho: 160px; Altura: 36px; Línea de altura: 36px; Text-Align: Center; flotante: izquierda; border-right: 1px solid #ddd;} .ulconter1 li.num39 {ancho: 39px; altura: 42px; Línea-aguja: 42px; flotante: izquierda; border-right: 1px solid #ddd;} .ulconter1 li.num73 {ancho: 73px; Altura: 42px; Línea-aguja: 42px; flotante: izquierda; border-right: 1px solid #ddd;} .ulconter1 li.num85 {ancho: 85px; Altura: 42px; Línea-aguja: 42px; flotante: izquierda; border-right: 1px solid #ddd;} .ulconter1 li.num114 {ancho: 140px; Altura: 42px; Línea-aguja: 42px; flotante: izquierda; border-right: 1px solid #ddd;} .ulconter1 li.num122 {ancho: 170px; Altura: 42px; Línea-aguja: 42px; flotante: izquierda; border-right: 1px solid #ddd;} .ulconter1 li.num167 {ancho: 180px; Altura: 42px; Línea-aguja: 42px; flotante: izquierda; border-right: 1px solid #ddd;} .ulconter1 li.num185 {ancho: 185px; Altura: 42px; Línea-aguja: 42px; flotante: izquierda; border-right: 1px solid #ddd;} .ulconter1 li.num70 {ancho: 70px; Altura: 42px; Línea-aguja: 42px; flotante: izquierda; border-right: 1px solid #ddd;} .ulconter1 li.num103 {ancho: 183px; Altura: 42px; Línea-aguja: 42px; flotante: izquierda; border-right: 1px solid #ddd;} .ulconter1 li.num97 {ancho: 160px; Altura: 42px; Línea-aguja: 42px; flotante: izquierda; border-right: 1px solid #ddd;} .ulconter1 li.num39 entrada {ancho: 19px; Altura: 19px; margen: 11px; borde: 1px sólido #ddd; } .ulconter1 li.num73 entrada {ancho: 68px; borde: 1px sólido #ddd; margen: 2px; línea de línea: 32px; altura: 32px;} .ulconter1 li.num85 entrada {ancho: 80px; borde: 1px sólido #ddd; margen: 2px; línea de línea: 32px; altura: 32px;} .ulconter1 li.num114 entrada {ancho: 135px; borde: 1px sólido #ddd; margen: 2px; línea de línea: 32px; altura: 32px;} .ulconter1 li.num122 entrada {ancho: 165px; borde: 1px sólido #ddd; margen: 2px; línea de línea: 32px; altura: 32px;} .ulconter1 li.num167 entrada {ancho: 175px; borde: 1px sólido #ddd; margen: 2px; línea de línea: 32px; altura: 32px;} .ulconter1 li.num185 entrada {ancho: 180px; borde: 1px sólido #ddd; margen: 2px; línea de línea: 32px; altura: 32px;} .ulconter1 li.num70 entrada {ancho: 65px; borde: 1px sólido #ddd; margen: 2px; línea de línea: 32px; altura: 32px;} .ulconter1 li.num103 entrada {ancho: 178px; borde: 1px sólido #ddd; margen: 2px; línea de línea: 32px; altura: 32px;} .ulconter1 li.num97 entrada {ancho: 150px; borde: 1px sólido #ddd; margen: 2px; línea de línea: 32px; altura: 32px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </toad> <body> <ul> <li ng-click = "otros.addcontact ()"> 新增 </li> <li> <li> <li> ng-chick = "otros.deleContact ()"> 删除 </li> <li ng-click = "otros.moveUp ()"> 上移 </li> <li ng-click = "otros.meovOwn ()"> 下移 </li> </ul> <divtableMain ""> <Ol> <li> </li> </li> 联系人 </li> 商务电话 </li> 商务电话 </li> <li> 移动电话 </li> <li> qq </li> <li> skype </li> <li> 电子邮件 </li> </ol> <ul ng-repeat = "elementos en elementos"> <li> <input type = "radio" ng-click = "otros.selected (item)" Nombre = "seleccione"> </li> <li> <input type = "Text" ng-model = "items.ementact" <li> <input type = "text" ng-model = "item.otherbusinesstel"> </li> <li> <input type = "text" ng-model = "item.othermobphone"> </li> <li> <input type = "text" ng-model = "item.otherqq"> </li> <li> <input type = "text" ng-model = "item.ithyskyphyphymet" <li> <input type = "text" ng-model = "item.otheremail"> </li> </ul> </div> <script> angular.module ('myapp', []). controler ('myctrl', function ($ scope) {$ scope.items = []; $ scope.others = {seleccionado:}, seleccionado: function (function (item) {item) {item) {Item) }, // 增加 addContact: function () {$ scope.items.push ({OtherContact: '', OtherBusinessTel: '', OtherMobphone: '', Otherqq: '', otroskype: '', OtherEMail: '', OtherDeliveryAddress: '', otrosx: '', OtherDePartment: ''}); Delecontact: function () {var index = $ scope.items.indexof (this.selectedItem); alerta ('已是第一了 不能再向上移了！ 不能再向上移了！'); alerta ('已是最後一了 已是最後一了 不能再向下移了！');总结
以上就是这篇文章的全部内容 ， 大家可以自己实践后看下效果 ， 这样更利于大家的理解和学习 希望本文对大家学习或使用 Angularjs 能有所帮助。如果有疑问可以留言交流 谢谢大家对武林网的支持。 谢谢大家对武林网的支持。