Bootstrap+angularjs+ngdialog Implementation Mode dialog box _angularjs

This article mainly introduces the "Angularjs+bootstrap+ngdialog Implementation Mode dialog", for JavaScript tutorials interested students can refer to: In the completion of a background management system, need to use the table to display the registered user information. But the user address is too long to display. So want to do a modal dialog box, click on the Detailed Address button, pop-up dialog box, display address.

The effect of the following figure:

The Ngdialog is a modal dialog box and pop-up window for angular.js applications by looking at the data and choosing to use Ngdialog to implement it. Ngdialog is very small (? 2K), has a minimalist API, highly customizable through themes, and has the sole dependency angular.js.

Ngdialog GitHub Address: Https://github.com/likeastore/ngDialog

Ngdialog demo:http://likeastore.github.io/ngdialog/

First, the required Ngdialog JS and CSS files are introduced.

Can be introduced via 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-default.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.min.js</span >

Injecting dependence in the controller of User.js

<span style= "FONT-SIZE:18PX;" >var usercontrollers = angular.module (' usercontrollers ', [' ngdialog ']);
Usercontrollers.controller (' Usercontroller ', [' $scope ', ' $http ', ' Ngdialog ', function ($scope, $http, Ngdialog) {
$scope. Name = ' user ';
$scope. user = "";
$scope. Address = "";
Gets the user information
$http. Get (' Http://localhost:3000/users '). Success (function (data) {
$scope. user = data;
Console.log ($scope. User);
});
When you click the Detail Address button, the pop-up dialog
$scope. clicktoaddress = function (address) {
$scope.
Ngdialog.open ({Template: ' views/test.html ',//Mode dialog box content is test.html
className: ' Ngdialog-theme-plain ',
Scope: $scope//To pass scope to test.html for display of address details
};}
] </span>

Test.html (reading the address in scope and displaying the table style using bootstrap)

<span style= "FONT-SIZE:18PX;" ><table class= "Table" >
<thead>
<tr>
<th>
recipient name
</th>
<td>
{{address.name}}
</td>
</tr>
<tr>
<th>
recipient address
</th>
<td>
{address.content}}
</td>
</tr>
<tr>
<th>
Mobile phone number
</th>
<td>
{address.phone}}
</td>
</ tr>
</thead>
</table></span>

User.html (Display the user's information, when the address is not empty, show the Detailed Address button, and click the button, call controller in the Clicktoaddress function)

<span style="font-size:18px;"><div>
<div class="panel panel-warning">
<div class="panel-heading">
User Management
</div>
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." ng-model='search'>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
<table class="table">
<thead>
<th>Name</th>
<th>Balance <span class="glyphicon glyphicon-flash" aria-hidden="true"> </span></th>
<th>Avatar</th>
<th>Default Address</th>
<th>action</th>
</thead>
<tbody>
<tr ng-repeat="user in user | filter : search" >
<td>{{user.userName}}</td>
<td>{{user.residualPayment}}</td>
<td ng-if="user.url != 'undefined' ">{{user.url}}</td>
<td ng-if="user.url == 'undefined' ">System default 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" class="btn btn-info navbar-btn">Detailed address</button>
</td>
<td>
<button type="button" class="btn btn-warning navbar-btn" ng-click="remove(user._id)">delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div></span> 

The above is a small set to introduce the Bootstrap+angularjs+ngdialog Implementation Mode dialog box, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!