Artikel ini terutama memperkenalkan "AngularJS+Bootstrap+NgDialog Mode Dialog Box". Siswa yang tertarik dengan tutorial JavaScript dapat merujuknya: Saat menyelesaikan sistem manajemen latar belakang, Anda perlu menggunakan tabel untuk menampilkan informasi pengguna yang terdaftar. Tetapi alamat pengguna terlalu panjang dan sulit ditampilkan. Jadi, jika Anda ingin membuat kotak dialog Mode, saat Anda mengklik tombol alamat terperinci, kotak dialog muncul dan menampilkan alamatnya.
Efeknya adalah sebagai berikut:
Dengan memeriksa informasi, pilih untuk menggunakan NGDialog, yang merupakan kotak dialog pola dan jendela pop-up untuk aplikasi Angular.js. Ngdialog sangat kecil (? 2K), memiliki API minimalis, sangat dapat disesuaikan melalui tema, dengan ketergantungan yang unik pada Angular.js.
Ngdialog Github Alamat: https://github.com/likestore/ngdialog
Demo ngDialog: http://likestore.github.io/ngdialog/
Pertama, perkenalkan file JS dan CSS yang diperlukan dari NgDialog.
Dapat diperkenalkan melalui CDN
<span style = "font-size: 18px;"> // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngdialog.min.csss//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/cloudflare.com Ult.min.css // cdnjs.cloudflare.com/Ajax/lib/ng-dialog/0.3.7/css/ngdialog-theeme-plain.min.css // cdnjs.cloudflare.com/Ajax/libs/ng-dialog/0.3.7/js/ngdialog/libs/ng-dialoG/0.3.7/JS/NGDIALM/NG. J.
Suntikan dependensi di controller di 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 = ""; // dapatkan informasi pengguna $ http.get ('http: // localhost: 3000/usering') .success (function (data) {$ scope.user = data; console. Tombol Alamat, kotak dialog mode $ scope.clicktoaddress = function (alamat) {$ scope.address = alamat; ngdialog.open ({templat: 'views/test.html', // konten dialog Mode adalah test. detail alamat});};}]) </span>test.html (baca alamat dalam ruang lingkup dan tampilkan, gaya tabel menggunakan bootstrap)
<span style = "font-size: 18px;"> <able> <Thead> <tr> <th> nama penerima </t> <td> {{address.name}} </td> </tr> <TR> </TD </td </td </td </td </th> {{address.content}} </td </td </td </td </{{ajaran.content}} </td Number </th> <td> {{address.phone}} </td> </tr> </tr> </able> </span>user.html (Tampilkan informasi pengguna. Saat alamat tidak kosong, tampilkan tombol alamat terperinci. Saat mengklik tombol, hubungi fungsi Clicktoaddress di pengontrol)
<span style="font-size:18px;"><div><div><div>User Management</div><div><div><input type="text" placeholder="Search for..." ng-model='search'><span><button type="button">Go!</button></span></div></div><table><tead><th>Name</th><th>Balance<span aria-hidden = "true"> </span> </th> <th> avatar </th> <th> Alamat default </t> <th> operasi </th> </tbody> <ttr Ng-Repeat = "Pengguna di Pengguna | Filter: Cari" > <td> {{user.userName}} </td> <td> {{{user.residualpayment}} </td> <td ng-if = "user.url! = 'tidak terdefinisi'"> {{{User.url}} </td> <td ng- = "User.url} </td> </td ng Avatar </td> <td ng-if = "user.address.length == 0"> Tidak ada alamat default </td> <td ng-if = "user.address.length! = 0" ng-repeat = "kancing =" kancing "ng-click =" clicktoaddress (address) <d "> <"> <pagess = "TOLX =" KOMPOLD "KUMTON/KOMPOL-KOMPOLT =" KOMPOL-KOMPOLD (KOMPOL-KOMPOLD (KOMPOL-KUMTON/TOLOBSED "TOLAMED"> type = "Tombol" ng-click = "Remove (user._id)"> delete </button> </td> </tbody> </able> </div> </span>Di atas adalah kotak dialog Mode Implementasi Bootstrap+AngularJS+NgDialog yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!