效果图
实例代码
<! Doctype html> <html lang = "en" ng-app = "myApp" ng-controller = "myctrl"> <head> <meta charset = "utf-8"> <title> title </title> <style> *{margin: 0; Padding: 0; estilo de lista: nenhum; font-size: 12px;} .clearfix {overflow: hidden; display: block; limpe: ambos} .clearfix: após {zoom: 1} .relação {margin-top: 7px; font: 14px/38px "微软雅黑";; Altura: 38px; Antecedentes: #f8f8f8; preenchimento-esquerda: 26px; Cor: #666;} .Relation li {margin-top: 5px; float: esquerda; preenchimento-esquerda: 50px; cursor: ponteiro; decoração de texto: duplo} .Relation li: hover {color: #f00}; .tablemain li {float: esquerda; preenchimento: 5px 10px; largura: 50px} .ullist1 li.num39 {width: 39px; Altura: 36px; altura da linha: 36px; Alinhamento de texto: centro; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .ullist1 li.num73 {width: 73px; Altura: 36px; altura da linha: 36px; Alinhamento de texto: centro; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .ullist1 li.num85 {width: 85px; Altura: 36px; altura de linha: 36px; Alinhamento de texto: centro; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .ullist1 li.num114 {width: 140px; Altura: 36px; altura da linha: 36px; Alinhamento de texto: centro; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .ullist1 li.num122 {width: 170px; Altura: 36px; altura da linha: 36px; Alinhamento de texto: centro; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .ullist1 li.num167 {width: 180px; Altura: 36px; altura da linha: 36px; Alinhamento de texto: centro; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .ullist1 li.num185 {width: 185px; Altura: 36px; altura da linha: 36px; Alinhamento de texto: centro; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .ullist1 li.num70 {width: 70px; altura: 36px; altura da linha: 36px; Alinhamento de texto: centro; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .ullist1 li.num103 {width: 183px; Altura: 36px; altura da linha: 36px; Alinhamento de texto: centro; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .ullist1 li.num97 {width: 160px; Altura: 36px; altura da linha: 36px; Alinhamento de texto: centro; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .UlConter1 li.num39 {largura: 39px; altura: 42px; altura da linha: 42px; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .UlConter1 li.num73 {width: 73px; Altura: 42px; altura da linha: 42px; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .UlConter1 li.num85 {width: 85px; Altura: 42px; altura da linha: 42px; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .UlConter1 li.num114 {width: 140px; Altura: 42px; altura da linha: 42px; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .UlConter1 li.num122 {largura: 170px; Altura: 42px; altura da linha: 42px; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .UlConter1 li.num167 {largura: 180px; Altura: 42px; altura da linha: 42px; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .UlConter1 li.num185 {largura: 185px; Altura: 42px; altura da linha: 42px; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .ulConter1 li.num70 {width: 70px; Altura: 42px; altura da linha: 42px; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .UlConter1 li.num103 {width: 183px; Altura: 42px; altura da linha: 42px; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .UlConter1 li.num97 {width: 160px; Altura: 42px; altura da linha: 42px; flutuar: esquerda; Right-Right: 1px sólido #ddd;} .UlConter1 li.num39 entrada {width: 19px; Altura: 19px; margem: 11px; Fronteira: 1px sólido #DDD; } .ulConter1 li.num73 entrada {width: 68px; Fronteira: 1px sólido #DDD; margem: 2px; altura da linha: 32px; Altura: 32px;} .ulConter1 li.num85 entrada {width: 80px; Fronteira: 1px sólido #DDD; margem: 2px; altura da linha: 32px; Altura: 32px;} .ulConter1 li.num114 entrada {largura: 135px; Fronteira: 1px sólido #DDD; margem: 2px; altura da linha: 32px; Altura: 32px;} .ulConter1 li.num122 Input {width: 165px; Fronteira: 1px sólido #DDD; margem: 2px; altura da linha: 32px; Altura: 32px;} .ulConter1 li.num167 entrada {width: 175px; Fronteira: 1px sólido #DDD; margem: 2px; altura da linha: 32px; Altura: 32px;} .ulConter1 li.num185 entrada {width: 180px; Fronteira: 1px sólido #DDD; margem: 2px; altura da linha: 32px; Altura: 32px;} .ulConter1 li.num70 entrada {width: 65px; Fronteira: 1px sólido #DDD; margem: 2px; altura da linha: 32px; Altura: 32px;} .ulConter1 li.num103 entrada {width: 178px; Fronteira: 1px sólido #DDD; margem: 2px; altura da linha: 32px; Altura: 32px;} .ulConter1 li.num97 entrada {width: 150px; Fronteira: 1px sólido #DDD; margem: 2px; altura da linha: 32px; Altura: 32px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <ul> <li ng-click = "outros.addcontact> </head> <body> <ul> <li li li-lick =" outros.addcontact> ng-click = "Outros.DELECONTACT ()"> 删除 </li> <li ng-click = "Others.MoveUp ()"> 上移 </li> <li ng-click = "Others.MoveDown ()"> 下移 </li> </ul> <divableMain "> <li> <li> <li> <li> <li> <li> 移动电话 </li> <li> qq </li> <li> Skype </li> <li> 电子邮件 </li> </ol> <ul ng-repeat = "Item em itens"> <li> <input type = "Radio" ng-click = "outros.selected (item)" Nome "" Select "> <li>> <li> </li> <li> <input type = "text" ng-model = "item.otherbusinessTel"> </li> <li> <input type = "text" ng-model = "item.otherMobphone"> </li> <li> <input Type = "text-model =" item.otherqq "> <li> <li> ng-model = "item.otherskype"> </li> <li> <input type = "text" ng-model = "item.OtherEmail"> </li> </ul> </div> <cript> angular.module ('myApp', []). SelectedItem: {}, selecionado: function (item) {this.selectedItem = item; Outrosex: '' OtherDepartment: ''}); TMP = Angular.Copy ($ SCOPE.Items [Index-1]); índice = scope.items.indexof (this.selectedItem); $ scope.items [index] = tmp;总结
以上就是这篇文章的全部内容 ， 大家可以自己实践后看下效果 ， 这样更利于大家的理解和学习 ， 希望本文对大家学习或使用 angularjs 能有所帮助。如果有疑问可以留言交流 ， 谢谢大家对武林网的支持。