效果图
实例代码
<! Doctype html> <html lang = "en" ng-app = "myApp" ng-controller = "myctrl"> <head> <meta charset = "UTF-8"> <Title> title </title> <tyle> *{margin: 0; padding: 0; List-style: none; font-size: 12px;} .clearfix {overflow: hidden; display: block; clear: keduanya} .clearfix: setelah {zoom: 1} .relation {margin-top: 7px; font: 14px/38px "微软雅黑"; Tinggi: 38px; Latar belakang: #f8f8f8; Padding-left: 26px; Warna: #666;} .relation li {margin-top: 5px; float: kiri; padding-left: 50px; kursor: pointer; dekorasi teks: double} .relation li: hover {color: #f00}; .tablemain li {float: left; padding: 5px 10px; lebar: 50px} .ulist1 li.num39 {lebar: 39px; Tinggi: 36px; garis-tinggi: 36px; Teks-Align: tengah; float: kiri; Border-Right: 1px solid #ddd;} .ullist1 li.num73 {width: 73px; Tinggi: 36px; garis-tinggi: 36px; Teks-Align: tengah; float: kiri; Border-Right: 1px solid #ddd;} .ullist1 li.num85 {width: 85px; Tinggi: 36px; Line-Height: 36px; Teks-Align: tengah; float: kiri; Border-Right: 1px solid #ddd;} .ullist1 li.num114 {width: 140px; Tinggi: 36px; garis-tinggi: 36px; Teks-Align: tengah; float: kiri; Border-Right: 1px solid #ddd;} .ullist1 li.num122 {width: 170px; Tinggi: 36px; garis-tinggi: 36px; Teks-Align: tengah; float: kiri; Border-Right: 1px solid #ddd;} .ullist1 li.num167 {width: 180px; Tinggi: 36px; garis-tinggi: 36px; Teks-Align: tengah; float: kiri; Border-Right: 1px solid #ddd;} .ullist1 li.num185 {width: 185px; Tinggi: 36px; garis-tinggi: 36px; Teks-Align: tengah; float: kiri; Border-Right: 1px solid #ddd;} .ullist1 li.num70 {width: 70px; tinggi: 36px; line-height: 36px; Teks-Align: tengah; float: kiri; Border-Right: 1px solid #ddd;} .ullist1 li.num103 {width: 183px; Tinggi: 36px; garis-tinggi: 36px; Teks-Align: tengah; float: kiri; Border-Right: 1px solid #ddd;} .ullist1 li.num97 {width: 160px; Tinggi: 36px; garis-tinggi: 36px; Teks-Align: tengah; float: kiri; Border-Right: 1px solid #ddd;} .ulconter1 li.num39 {lebar: 39px; tinggi: 42px; Line-Height: 42px; float: kiri; Border-Right: 1px solid #ddd;} .ulconter1 li.num73 {width: 73px; Tinggi: 42px; Line-Height: 42px; float: kiri; Border-Right: 1px solid #ddd;} .ulconter1 li.num85 {width: 85px; Tinggi: 42px; Line-Height: 42px; float: kiri; Border-Right: 1px solid #ddd;} .ulconter1 li.num114 {width: 140px; Tinggi: 42px; Line-Height: 42px; float: kiri; Border-Right: 1px solid #ddd;} .ulconter1 li.num122 {width: 170px; Tinggi: 42px; Line-Height: 42px; float: kiri; Border-Right: 1px solid #ddd;} .ulconter1 li.num167 {width: 180px; Tinggi: 42px; Line-Height: 42px; float: kiri; Border-Right: 1px solid #ddd;} .ulconter1 li.num185 {width: 185px; Tinggi: 42px; Line-Height: 42px; float: kiri; Border-Right: 1px solid #ddd;} .ulconter1 li.num70 {width: 70px; Tinggi: 42px; Line-Height: 42px; float: kiri; Border-Right: 1px solid #ddd;} .ulconter1 li.num103 {width: 183px; Tinggi: 42px; Line-Height: 42px; float: kiri; Border-Right: 1px solid #ddd;} .ulconter1 li.num97 {width: 160px; Tinggi: 42px; Line-Height: 42px; float: kiri; Border-Right: 1px solid #ddd;} .ulconter1 li.num39 input {width: 19px; Tinggi: 19px; margin: 11px; Perbatasan: 1px solid #ddd; } .ulconter1 li.num73 input {width: 68px; Perbatasan: 1px solid #ddd; margin: 2px; garis-tinggi: 32px; Tinggi: 32px;} .ulconter1 li.num85 input {lebar: 80px; Perbatasan: 1px solid #ddd; margin: 2px; garis-tinggi: 32px; tinggi: 32px;} .ulconter1 li.num114 input {lebar: 135px; Perbatasan: 1px solid #ddd; margin: 2px; garis-tinggi: 32px; Tinggi: 32px;} .ulconter1 li.num122 input {lebar: 165px; Perbatasan: 1px solid #ddd; margin: 2px; garis-tinggi: 32px; Tinggi: 32px;} .ulconter1 li.num167 input {lebar: 175px; Perbatasan: 1px solid #ddd; margin: 2px; garis-tinggi: 32px; Tinggi: 32px;} .ulconter1 li.num185 input {width: 180px; Perbatasan: 1px solid #ddd; margin: 2px; garis-tinggi: 32px; Tinggi: 32px;} .ulconter1 li.num70 input {lebar: 65px; Perbatasan: 1px solid #ddd; margin: 2px; garis-tinggi: 32px; Tinggi: 32px;} .ulconter1 li.num103 input {lebar: 178px; Perbatasan: 1px solid #ddd; margin: 2px; garis-tinggi: 32px; Tinggi: 32px;} .ulconter1 li.num97 input {lebar: 150px; Perbatasan: 1px solid #ddd; margin: 2px; garis-tinggi: 32px; Tinggi: 32px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <ul> <ul> <li-lick = "Lainnya.addcontact ()"> 新增 <ul> <i ng-click = "Lainnya.Addcontact ()"> <ul> <ul> <i ng-click = "Lains.addcontact ()"> 新增 <ul> <li> <li> NG-klik = "Other.delecontact ()"> 删除 </li> <li ng-click = "Others.moveUp ()"> 上移 </li> <li ng-click = "Others.movedown ()"> </li> </ul> <voLablemain ""> <ol> <ol> </Li> <li> <li> <联系人 </Li> </Li> <联系人 </Li> <联系人 </Li> <联系人 </Li> </Li> </Li> </Li> </Li> </ <li> 移动电话 </li> <li> qq </li> <li> Skype </li> <li> 电子邮件 </li> </ol> <ul ng-repeat = "item dalam item"> <li> <input type = "radio" ng-click = "input. </li> <li> <input type = "text" ng-model = "item.otherbusinesstel"> </li> <li> <input type = "text" ng-model = "item.othermobphone"> </li> <li> <input type = "Text" TEXT "TEXT =" item.otherqq "> </Li> <input =" TEXT "TEXT" TEKS = "TEXT" TEKS = "TEKS =" TEKS = "TEXT" TEXT = "TEXT" TEXT = "TEXT" TEXT = "TEXT" TEXT = "TEXT" TEXT "TEXT" TEXT "TEXT" TEXT "TEXT" TEXT "TEXT" TEXT " NG-Model = "item.otherskype"> </li> <li> <input type = "text" ng-model = "item.otheremail"> </li> </ul> </div> <script> Angular.module ('myapp', []). Controller ('myctrl', function ($ scope) {sceP. selectedItem:{}, selected:function(item){ this.selectedItem=item; }, //增加 addContact:function(){ $scope.items.push({ otherContact:'', otherBusinessTel:'', otherMobPhone:'', otherQQ:'', otherSKYPE:'', otherEmail:'', otherDeliveryAddress:'', Lainnya: 'Departemen Lainnya:' '}); tmp = angular.copy ($ scope.items [index-1]); indeks = scope.Items.indexof (ini. }}) </script> </body> </html>总结
以上就是这篇文章的全部内容 ， 大家可以自己实践后看下效果 ， 这样更利于大家的理解和学习 ， 希望本文对大家学习或使用 angularjs ， ， 谢谢大家对武林网的支持。