效果图
实例代码
<! DocType html> <html lang = "en" ng-App = "myapp" ng-controller = "myctrl"> <head> <meta charset = "utf-8"> <title> Titel </title> <style> *{Margin: 0; Padding: 0; Listenstil: Keine; Schriftgröße: 12px;} .clearFix {Überlauf: Hidden; Anzeige: Block; Clear: Beide} .ClearFix: After {Zoom: 1} .relation {margin-top: 7px; Schrift: 14px/38px "微软雅黑"; Höhe: 38px; Hintergrund: #f8f8f8; Padding-Links: 26px; Farbe: #666;} .relation li {margin-top: 5px; float: links; padding-links: 50px; cursor: pointer; textdekoration: double} .relation li: hover {color: #f00}; .tablemain li {float: links; padding: 5px 10px; width: 50px} .ullist1 li.num39 {width: 39px; Höhe: 36px; Linienhöhe: 36px; Text-Align: Mitte; float: links; Grenzrechte: 1px solide #ddd;} .ullist1 li.num73 {width: 73px; Höhe: 36px; Linienhöhe: 36px; Text-Align: Mitte; float: links; Grenzrechte: 1PX Solid #ddd;} .ullist1 li.num85 {width: 85px; Höhe: 36px; Zeilenhöhe: 36px; Text-Align: Mitte; float: links; Grenzrechte: 1px solide #ddd;} .ullist1 li.num114 {width: 140px; Höhe: 36px; Linienhöhe: 36px; Text-Align: Mitte; float: links; Grenzrechte: 1px solide #ddd;} .ullist1 li.num122 {width: 170px; Höhe: 36px; Linienhöhe: 36px; Text-Align: Mitte; float: links; Grenzrechte: 1px solide #ddd;} .ullist1 li.num167 {width: 180px; Höhe: 36px; Linienhöhe: 36px; Text-Align: Mitte; float: links; Grenzrechte: 1PX Solid #ddd;} .ullist1 li.num185 {Breite: 185px; Höhe: 36px; Linienhöhe: 36px; Text-Align: Mitte; float: links; Grenzrechte: 1PX Solid #ddd;} .ullist1 li.num70 {Breite: 70px; Höhe: 36px; Linienhöhe: 36px; Text-Align: Mitte; float: links; Grenzrechte: 1px solide #ddd;} .ullist1 li.num103 {width: 183px; Höhe: 36px; Linienhöhe: 36px; Text-Align: Mitte; float: links; Grenzrechte: 1px solide #ddd;} .ullist1 li.num97 {width: 160px; Höhe: 36px; Linienhöhe: 36px; Text-Align: Mitte; float: links; Grenzrechte: 1PX Solid #ddd;} .ulconter1 li.num39 {Breite: 39px; Höhe: 42px; Zeilenhöhe: 42px; float: links; Grenzrechte: 1PX Solid #ddd;} .ulconter1 li.num73 {width: 73px; Höhe: 42px; Zeilenhöhe: 42px; float: links; Grenzrechte: 1PX Solid #ddd;} .ulconter1 li.num85 {width: 85px; Höhe: 42px; Zeilenhöhe: 42px; float: links; Grenzrechte: 1PX Solid #ddd;} .ulconter1 li.num114 {Breite: 140px; Höhe: 42px; Zeilenhöhe: 42px; float: links; Grenzrechte: 1PX Solid #ddd;} .ulconter1 li.num122 {width: 170px; Höhe: 42px; Zeilenhöhe: 42px; float: links; Grenzrechte: 1PX Solid #ddd;} .ulconter1 li.num167 {width: 180px; Höhe: 42px; Zeilenhöhe: 42px; float: links; Grenzrechte: 1PX Solid #ddd;} .ulconter1 li.num185 {width: 185px; Höhe: 42px; Zeilenhöhe: 42px; float: links; Grenzrechte: 1PX Solid #ddd;} .ulconter1 li.num70 {Breite: 70px; Höhe: 42px; Zeilenhöhe: 42px; float: links; Grenzrechte: 1PX Solid #ddd;} .ulconter1 li.num103 {width: 183px; Höhe: 42px; Zeilenhöhe: 42px; float: links; Grenzrechte: 1PX Solid #ddd;} .ulconter1 li.num97 {width: 160px; Höhe: 42px; Zeilenhöhe: 42px; float: links; Grenzrechte: 1PX Solid #ddd;} .ulconter1 li.num39 Eingabe {width: 19px; Höhe: 19px; Rand: 11px; Grenze: 1PX Solid #ddd; } .ulconter1 li.num73 input {width: 68px; Grenze: 1PX Solid #ddd; Rand: 2px; Linienhöhe: 32px; Höhe: 32px;} .ulconter1 li.num85 Eingabe {Breite: 80px; Grenze: 1PX Solid #ddd; Rand: 2px; Linienhöhe: 32px; Höhe: 32px;} .ulconter1 li.num114 Eingabe {width: 135px; Grenze: 1PX Solid #ddd; Rand: 2px; Linienhöhe: 32px; Höhe: 32px;} .ulconter1 li.num122 Eingabe {Breite: 165px; Grenze: 1PX Solid #ddd; Rand: 2px; Linienhöhe: 32px; Höhe: 32px;} .ulconter1 li.num167 input {width: 175px; Grenze: 1PX Solid #ddd; Rand: 2px; Linienhöhe: 32px; Höhe: 32px;} .ulconter1 li.num185 Eingabe {Breite: 180px; Grenze: 1PX Solid #ddd; Rand: 2px; Linienhöhe: 32px; Höhe: 32px;} .ulconter1 li.num70 Eingabe {Breite: 65px; Grenze: 1PX Solid #ddd; Rand: 2px; Linienhöhe: 32px; Höhe: 32px;} .ulconter1 li.num103 Eingabe {width: 178px; Grenze: 1PX Solid #ddd; Rand: 2px; Linienhöhe: 32px; Höhe: 32px;} .ulconter1 li.num97 Eingabe {width: 150px; Grenze: 1PX Solid #ddd; Rand: 2px; Linienhöhe: 32px; Höhe: 32px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <ul> <li ng-click = "Andere.addcont ()"> "新增 </li> <li> <li> <li ng-klick = "Andere. <li> 移动电话 </li> <li> qq </li> <li> Skype </li> <li> 电子邮件 </li> </ol> <ul ng-repeat = "item in items"> <li> <Eingabe type "radio" ng-klick = "Andere). <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.otherSKYPE" > </li> <li> <Eingabe type = "text" ng-model = "item.otheremail"> </li> </ul> </div> <script> Angular. this.selectedItem = item; // 除； DELECONTACT: FUNKTION () {var index = $ scope.Items.indexof (this.selectedItem); if (index == 0) {alert ('已是第一了 ， 不能再向上移了！'); alert ('已是最後一了 ， 不能再向下移了！');总结
以上就是这篇文章的全部内容 ， 大家可以自己实践后看下效果 ， 这样更利于大家的理解和学习 ， 希望本文对大家学习或使用 Angularjs 能有所帮助。如果有疑问可以留言交流 ， 谢谢大家对武林网的支持。 谢谢大家对武林网的支持。