效果图
实例代码
<! Doctype html> <html lang = "en" ng-app = "myApp" ng-controller = "myCtrl"> <Head> <meta charset = "UTF-8"> <Tite> tit Список стиля: none; font-size: 12px;} .clearfix {overflow: hidden; display: block; clear: оба} .clearfix: после {Zoom: 1} .Relation {margin-top: 7px; font: 14px/38px "微软雅黑"; Высота: 38px; Фон: #f8f8f8; Лебь набивки: 26px; Цвет: #666;} .Relation li {margin-top: 5px; float: слева; .tablemain li {float: left; Padding: 5px 10px; ширина: 50px} .ullist1 li.num39 {ширина: 39px; Высота: 36px; высота линии: 36px; Текст-альбом: Центр; Плавание: осталось; граница правая: 1px solid #ddd;} .ullist1 li.num73 {width: 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 input {width: 19px; Высота: 19px; Маржа: 11px; Граница: 1PX SOLID #DDD; } .ulconter1 li.num73 input {width: 68px; Граница: 1PX SOLID #DDD; Покрас: 2px; линейная высота: 32px; Высота: 32px;} .ulconter1 li.num85 input {width: 80px; Граница: 1PX SOLID #DDD; Покрас: 2px; линейная высота: 32px; Высота: 32px;} .ulconter1 li.num114 input {width: 135px; Граница: 1PX SOLID #DDD; Покрас: 2px; линейная высота: 32px; Высота: 32px;} .ulconter1 li.num122 input {ширина: 165px; Граница: 1PX SOLID #DDD; Покрас: 2px; линейная высота: 32px; Высота: 32px;} .ulconter1 li.num167 input {ширина: 175px; Граница: 1PX SOLID #DDD; Покрас: 2px; линейная высота: 32px; Высота: 32px;} .ulconter1 li.num185 input {ширина: 180px; Граница: 1PX SOLID #DDD; Покрас: 2px; линейная высота: 32px; Высота: 32px;} .ulconter1 li.num70 input {width: 65px; Граница: 1PX SOLID #DDD; Покрас: 2px; линейная высота: 32px; Высота: 32px;} .ulconter1 li.num103 input {width: 178px; Граница: 1PX SOLID #DDD; Покрас: 2px; линейная высота: 32px; Высота: 32px;} .ulconter1 li.num97 input {width: 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> <body> <ul> <li ng-click = "tern.addcontact ()" ng-click="others.deleContact()">删除</li> <li ng-click="others.moveUp()">上移</li> <li ng-click="others.moveDown()">下移</li></ul><divtableMain""> <ol> <li></li> <li>联系人</li> <li>商务电话</li> <li> 移动电话 </li> <li> QQ </li> <li> Skype </li> <li> 电子邮件 </li> </ol> <ul ng-repeat = "item в элементах"> <li> <input type = "radio" ng-click = "ether.selected (item)" name = "select"> </li> <li> <input type = "ng-ng-comon </li> <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 =" ng-comodel = "item.otherqq> </li> <li> <li inpult". </li> <li> <input type = "text" ng-model = "item.otheremail"> </li> </ul> </div> <script> angular.module ('myApp', []). Controller ('myCtrl', function ($ scope) {$ scope.items = []; this.selecteditem = item; / tmp = angular.copy ($ scope.items [index-1]); index = $ scope.items.indexof (this.selectionitem); $ scope.items [index] = tmp;总结
以上就是这篇文章的全部内容 , 大家可以自己实践后看下效果 这样更利于大家的理解和学习 , 希望本文对大家学习或使用 angularjs 能有所帮助。如果有疑问可以留言交流 , 谢谢大家对武林网的支持。