이 기사는 주로 "AngularJs+bootstrap+ngdialog 구현 모드 대화 상자"를 소개합니다. JavaScript 자습서에 관심이있는 학생들은이를 참조 할 수 있습니다. 배경 관리 시스템을 완료 할 때는 등록 된 사용자의 정보를 표시하려면 테이블을 사용해야합니다. 그러나 사용자 주소가 너무 길고 표시하기가 어렵습니다. 따라서 모드 대화 상자를 만들려면 자세한 주소 버튼을 클릭하면 대화 상자가 팝업되어 주소가 표시됩니다.
효과는 다음과 같습니다.
정보를 확인하면 Angular.js 응용 프로그램의 패턴 대화 상자 및 팝업 창인 NGDialog를 사용하도록 선택하십시오. NGDialog는 매우 작고 (? 2K), Minicalist API를 가지고 있으며, 테마를 통해 사용자 정의 할 수 있으며 Angular.js에 고유 한 의존성이 있습니다.
ngdialog github 주소 : https://github.com/likestore/ngdialog
ngdialog demo : http://likestore.github.io/ngdialog/
먼저 NGDialog의 필요한 JS 및 CSS 파일을 소개하십시오.
CDN을 통해 도입 할 수 있습니다
<span style = "font-size : 18px;"> // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngdialog.min.css//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.7/csss/ngdialog-- Thememegefefa ult.min.css // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngdialog-theme-plain.min.css // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/js/ngdialog
user.js의 컨트롤러에 종속성을 주입합니다
<span style = "font-size : 18px;"> var usercontrollers = angular.module ( 'usercontrollers', [ 'ngdialog']); usercontrollers.controller ( 'usercontroller', [ '$ scope', '$ http', 'ngdialog', function, $ http, ngdialog) {$ scope.name = 'user'; $ scope.user = ""; $ scope.address = ""; // 사용자 정보 가져 오기 $ http.get ( 'http : // localhost : 3000/users') .success (function (data) {$ scope.user = confope.log ($ scope.)); 주소 버튼, 모드 대화 상자 $ scope.clicktoaddress = function (주소) {$ scope.address = address; ngdialog.open ({template : 'views/test.html', // 모드 대화 상자의 내용은 test.htmlclassname : 'ngdialog-theme-plain', scope to : : // ht scope to : : // test. 주소 세부 사항});};}]) </span>test.html (스코프에서 주소를 읽고 표시하면 테이블 스타일은 부트 스트랩을 사용합니다).
<span style = "font-size : 18px;"> <table> <thead> <tr> <th> 수신자 이름 </th> <td> {{wasse.name}} </td> </tr> <tt> <th> 수신자 주소 </th> <td> {adress.content}} </td> <tr> 숫자 </th> <td> {{wasse.phone}} </td> </tr> </tr> </table> </span>user.html (사용자 정보 표시. 주소가 비어 있지 않으면 자세한 주소 버튼을 표시하십시오. 버튼을 클릭하면 컨트롤러에서 ClickToadDress 함수를 호출하십시오)
<span style = "font-size : 18px;"> <div> <div> <div> 사용자 관리 </div> <div> <div> <입력 유형 = "text"placeholder = "검색 ..."ng-model = 'search'> <span> <버튼 유형 = "button"> go! </button> </span> </div> <tail> <tead> aria-hidden = "true"> </span> </th> <th> avatar </th> <th> 기본 주소 </th> <th> 작동 </th> </tbody> <ttr ng-repeat = "사용자의 사용자 | 필터 : 검색" > <td> {{user.username}} </td> <td> {{user.residualPayment}} </td> <td ng-if = "user.url! = 'undefined'" "> {user.url}} </td> <td ng-if ="user.url = "user.url ="user. 아바타 </td> <td ng-if = "user.address.length == 0"> 기본 주소 없음 </td> <td ng-if = "user.address.length! = 0"ng-repeat = "user.address"ng-click = "clicktoaddress (address)"<td> <td> "버튼"> type = "button"ng-click = "remove (user._id)"> delete </button> </td> </tbody> </table> </div> </span>위의 내용은 편집자가 소개 한 Bootstrap+AngularJS+Ngdialog 구현 모드 상자입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!