この記事では、主に「Angularjs+Bootstrap+Ngdialog実装モードダイアログボックス」を紹介します。 JavaScriptチュートリアルに興味のある学生は、それを参照できます。バックグラウンド管理システムを完了するときは、登録ユーザーの情報を表示するためにテーブルを使用する必要があります。ただし、ユーザーアドレスは長すぎて表示するのが困難です。したがって、[モード]ダイアログボックスを作成する場合、[アドレスの詳細]ボタンをクリックすると、ダイアログボックスがポップアップ表示され、アドレスが表示されます。
効果は次のとおりです。
情報をチェックすることで、NGDialogを使用することを選択します。これは、Angular.jsアプリケーション用のパターンダイアログボックスとポップアップウィンドウです。 Ngdialogは非常に小さく（？2k）、Minimalist APIがあり、テーマを通じて高度にカスタマイズ可能で、Angular.jsにユニークな依存性があります。
ngdialog githubアドレス：https：//github.com/likestore/ngdialog
ngdialogデモ：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.3.7/cs/ngdialog-def. ult.min.css // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngdialog-theme-plain.css // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/js/ngdialog.min.js
user.jsのコントローラーに依存関係を注入します
<span style = "font-size：18px;"> var usercontrollers = angular.module（ 'usercontrollers'、['ngdialog']）; usercontrollers.controller（ 'usercontroller'、['$ scope'、 '$ http'、 'ngdialog、$ http、$ http ngdialog）{$ scope.name = 'user'; $ scope.user = ""; $ scope.address = "; //ユーザー情報を取得$ http.get（ 'http：// localhost：3000/users'）.success（function（data）{$ scope.user = datis = data（$ scope）; address button, the mode dialog box $scope.clickToAddress = function (address) {$scope.address = address;ngDialog.open({ template: 'views/test.html',//The content of the mode dialog box is test.htmlclassName: 'ngdialog-theme-plain',scope:$scope //Pass scope to test.html to displayアドレスの詳細}）;};}]）</span>test.html（スコープのアドレスを読んで表示すると、テーブルスタイルはブートストラップを使用します）
<span style = "font-size：18px;"> <table> <thead> <tr> <th>受信者名</th> <td> {{address.name}}} </td> </tr> <tr> <th </th> <td> {{address.content}}} </td> </tr <番号</th> <td> {{address.phone}} </td> </tr> </tr> </table> </span>user.html（ユーザー情報を表示します。アドレスが空になっていない場合は、詳細なアドレスボタンを表示します。ボタンをクリックするときは、コントローラーのClickToAddress関数を呼び出してください）
<span style = "font-size：18px;"> <div> <div> <div>ユーザー管理</div> <div> <div> <div> <入力タイプ= "テキスト" Placeholder = "search for ..." ng-model = 'search'> <span> <span> <button = "button"> go！</button> </span </div> <tel <the> <tead </<th> aria-hidden = "true"> </span> </th> <th> avatar </th> <th>デフォルトアドレス</th> <th>操作</th> <th> </tbody> <ttr ng-repeat = "ユーザーのユーザー|フィルター：検索"> <td> {{user.username}}}} ng-if = "user.url！= 'undefined'" "> {{user.url}} </td> <td ng-if =" user.url == 'undefined' "> default avatar </td> <td ng-if =" user.address.lengt == 0 " 0 "ng-repeat =" user.address "ng-click =" clickToAddress（address） "> <ボタンタイプ="ボタン ">詳細アドレス</button> </td> <td> <ボタンタイプ="ボタン "ng-click =" remove（user._id） "> delete </button> </td> </tbody> </div上記は、編集者が紹介したブートストラップ+angularjs+ngdialog実装モードダイアログボックスです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！