Эта статья в основном представляет диалоговое окно «Реализация AngularJS+Bootstrap+Ngdialog». Студенты, которые заинтересованы в учебных пособиях JavaScript, могут ссылаться на это: при завершении системы управления фоном необходимо использовать таблицу для отображения информации зарегистрированного пользователя. Но адрес пользователя слишком длинный и трудно отобразить. Поэтому, если вы хотите создать диалоговое окно режима, когда вы нажимаете кнопку «Подробный адрес», появляется диалоговое окно и отображает адрес.
Эффект заключается в следующем:
Проверяя информацию, выберите использование ngdialog, которое представляет собой диалоговое окно с шаблоном и всплывающее окно для приложений Angular.js. ngdialog очень мал (? 2K), имеет минималистский API, настраиваемый через темы, с уникальной зависимостью от Angular.js.
ngdialog github Адрес: https://github.com/likestore/ngdialog
ngdialog demo: http://likestore.github.io/ngdialog/
Во -первых, введите необходимые файлы JS и CSS NGDialog.
Может быть введен через 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/css/ngDialog-theme-defa ult.min.css // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngdialog-teme-lain.min.css // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/js/ngdialog.min.js </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', $ scope, $ htt ngdialog) {$ scope.name = 'user'; $ scope.user = ";"; $ scope.address = ""; // Получить информацию пользователя $ http.get ('http: // localhost: 3000/users') .success (function (data) {$ scope.ser = dataSole. Кнопка адреса, диалоговое окно режима $ scope.clicktoaddress = function (адрес) {$ scope.address = address; ngdialog.open ({template: 'views/test.html', // Содержимое диалогового окна режима. Подробности});};}]) </span>test.html (прочитайте адрес по объему и отобразите его, в стиле таблицы используется начальная загрузка)
<span style = "font-size: 18px;"> <table> <thead> <tr> <th> Имя получателя </th> <td> {{address.name}} </td> </tr> <tr> <th> refence Адрес </th> номер </th> <td> {{addry.phone}} </td> </tr> </tr> </table> </span>user.html (показать информацию пользователя. Когда адрес не пуст, отобразите подробную кнопку адреса. При нажатии кнопки вызовите функцию ClickToadDress в контроллере)
<span style = "font-size: 18px;"> <div> <div> <div> Управление пользователем </div> <div> <div> <input type = "text" Placeholder = "Search for ..." ng-model = 'search'> <pan> <tool Type = "Button"> Go! aria-hidden = "true"> </span> </th> <th> avatar </th> <th> Адрес по умолчанию </th> <Th> операция </th> </tbody> <ttr ng-repeat = "Пользователь в пользователе | Фильтр: Поиск" > <td> {{us user.username}} </td> <td> {{user.ResidualPayment}} </td> <td ng-if = "user.url! = 'undefined'"> {{user.url}} </td> <td ng-if = " avatar</td><td ng-if="user.address.length == 0 ">No default address</td><td ng-if="user.address.length != 0"ng-repeat="address in user.address " ng-click="clickToAddress(address)"><button type="button">Detailed address</button></td><td><button type = "кнопка" ng-click = "remove (user._id)"> delete </button> </td> </tbody> </table> </div> </span>Выше приведено диалоговое окно «Режим реализации Bootstrap+Angularjs+ngdialog», представленный вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!