效果图
实例代码
<! doctype html> <html lang = "en"ng-app = "myapp"ng-controller = "myctrl"> <head> <meta charset = "utf-8"> <title> title> <style> *{margin : 0; 패딩 : 0; 목록 스타일 : 없음; font-size : 12px;} .ClearFix {Overflow : Hidden; Display : Block; Clear : Clear : 둘 다}. 후 {Zoom : 1}. Relation {margin-top : 7px; font : 14px/38px "微软雅黑"; 높이 : 38px; 배경 : #f8f8f8; 왼쪽 패딩 : 26px; 색상 : #666;}. Relation Li {margin-top : 5px; float : 왼쪽; 왼쪽; Padding-left : 50px; 커서 : 포인터; 텍스트-결정 : double}. Relation Li : Hover {color : #f00}; .TableMain li {float : 왼쪽; 패딩 : 5px 10px; 너비 : 50px} .Ullist1 li.num39 {너비 : 39px; 높이 : 36px; 라인 높이 : 36px; 텍스트 정렬 : 센터; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ullist1 li.num73 {너비 : 73px; 높이 : 36px; 라인 높이 : 36px; 텍스트 정렬 : 센터; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ullist1 li.num85 {너비 : 85px; 높이 : 36px; 라인 높이 : 36px; 텍스트 정렬 : 센터; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ullist1 li.num114 {너비 : 140px; 높이 : 36px; 라인 높이 : 36px; 텍스트 정렬 : 센터; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ullist1 li.num122 {너비 : 170px; 높이 : 36px; 라인 높이 : 36px; 텍스트 정렬 : 센터; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ullist1 li.num167 {너비 : 180px; 높이 : 36px; 라인 높이 : 36px; 텍스트 정렬 : 센터; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ullist1 li.num185 {너비 : 185px; 높이 : 36px; 라인 높이 : 36px; 텍스트 정렬 : 센터; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ullist1 li.num70 {너비 : 70px; 높이 : 36px; 선-하이 (36px; 텍스트 정렬 : 센터; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ullist1 li.num103 {너비 : 183px; 높이 : 36px; 라인 높이 : 36px; 텍스트 정렬 : 센터; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ullist1 li.num97 {너비 : 160px; 높이 : 36px; 라인 높이 : 36px; 텍스트 정렬 : 센터; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ulconter1 li.num39 {너비 : 39px; 높이 : 42px; 라인 높이 : 42px; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ulconter1 li.num73 {너비 : 73px; 높이 : 42px; 라인 높이 : 42px; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ulconter1 li.num85 {너비 : 85px; 높이 : 42px; 라인 높이 : 42px; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ulconter1 li.num114 {너비 : 140px; 높이 : 42px; 라인 높이 : 42px; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ulconter1 li.num122 {너비 : 170px; 높이 : 42px; 라인 높이 : 42px; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ulconter1 li.num167 {너비 : 180px; 높이 : 42px; 라인 높이 : 42px; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ulconter1 li.num185 {너비 : 185px; 높이 : 42px; 라인 높이 : 42px; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ulconter1 li.num70 {너비 : 70px; 높이 : 42px; 라인 높이 : 42px; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ulconter1 li.num103 {너비 : 183px; 높이 : 42px; 라인 높이 : 42px; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ulconter1 li.num97 {너비 : 160px; 높이 : 42px; 라인 높이 : 42px; 플로트 : 왼쪽; 테두리 오른쪽 : 1px solid #ddd;} .ulconter1 li.num39 입력 {너비 : 19px; 높이 : 19px; 여백 : 11px; 국경 : 1px Solid #ddd; } .ulconter1 li.num73 입력 {너비 : 68px; 국경 : 1px Solid #ddd; 여백 : 2px; 라인 높이 : 32px; 높이 : 32px;} .ulconter1 li.num85 입력 {너비 : 80px; 국경 : 1px Solid #ddd; 여백 : 2px; 라인 높이 : 32px; 높이 : 32px;} .ulconter1 li.num114 입력 {너비 : 135px; 국경 : 1px Solid #ddd; 여백 : 2px; 라인 높이 : 32px; 높이 : 32px;} .ulconter1 li.num122 입력 {너비 : 165px; 국경 : 1px Solid #ddd; 여백 : 2px; 라인 높이 : 32px; 높이 : 32px;} .ulconter1 li.num167 입력 {너비 : 175px; 국경 : 1px Solid #ddd; 여백 : 2px; 라인 높이 : 32px; 높이 : 32px;} .ulconter1 li.num185 입력 {너비 : 180px; 국경 : 1px Solid #ddd; 여백 : 2px; 라인 높이 : 32px; 높이 : 32px;} .ulconter1 li.num70 입력 {너비 : 65px; 국경 : 1px Solid #ddd; 여백 : 2px; 라인 높이 : 32px; 높이 : 32px;} .ulconter1 li.num103 입력 {너비 : 178px; 국경 : 1px Solid #ddd; 여백 : 2px; 라인 높이 : 32px; 높이 : 32px;} .ulconter1 li.num97 입력 {너비 : 150px; 국경 : 1px Solid #ddd; 여백 : 2px; 라인 높이 : 32px; 높이 : 32px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <li ng-click = "Others.addcontact ()"> </li> <li ng-click = "oxtor.delecontact ()"> 删除 </li> <li ng-click = "others.moveup ()"> </li> <li> <li> <li <li </li> </li> </ul> <divtablemain ""> <li> </li> <li> </li> </li> </li> <li> </li> <li> qq </li> <li> skype </li> <li> </li> <li> </li> </ol> <ul ng-repeat = "항목의 항목"> <li> <input type = "radio"ng-click = "others. eiret."select "> </li> <li> <input type ="텍스트 "ng-mod"> </li> <li> <input type = "text"ng-model = "item.otherbusinesstel"> </li> <li> <입력 유형 = "text"ng-model = "item.othermobphone"> </li> <li> <입력 = "text"ng-model = "item.otherqq "> <li> <input type =" "텍스트" ng-model = "item.otherskype"> </li> <li> <입력 유형 = "text"ng-model = "item.otheremail"> </li> </ul> </div> <cript> angular.module ( 'myapp', []). controller ( 'myctrl', function ($ scope.items =]; SelectedItem : {}, selected : function (item) {this.selectedItem = item}, // 增加 addContact : function () {elsecope.items.push ({OtherContact : '', OtherMobphone : '', OtherQQ : ',' ',' ',' ',' ',' ' `` ',' ''}; tmp = copy index. indexof (index = scope.items.length) {var tmp = angular.copy. }}}) </script> </body> </html>总结
"