تقدم هذه المقالة بشكل أساسي مربع الحوار "AngularJS+Bootstrap+Ngdialog". يمكن للطلاب المهتمين بالدروس التعليمية JavaScript الرجوع إليها: عند إكمال نظام إدارة الخلفية ، تحتاج إلى استخدام جدول لعرض معلومات المستخدم المسجل. لكن عنوان المستخدم طويل جدًا ويصعب عرضه. لذا ، إذا كنت ترغب في إنشاء مربع حوار وضع ، عند النقر فوق زر العنوان التفصيلي ، يظهر مربع حوار ويعرض العنوان.
التأثير على النحو التالي:
من خلال التحقق من المعلومات ، اختر استخدام ngdialog ، وهو مربع حوار نمط ونافذة منبثقة لتطبيقات Angular.js. ngdialog صغير جدًا (؟ 2K) ، يحتوي على واجهة برمجة تطبيقات الحد الأدنى ، قابلة للتخصيص بشكل كبير من خلال الموضوعات ، مع تبعية فريدة على 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.7/css/ngdialog 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.min.js </spans </spans </spans </spans </spans </spans </spans </spans </spans </spans </spans </
حقن التبعيات في وحدة التحكم في user.js
<span style = "font-size: 18px ؛"> var usercontrollers = Angular.module ('UserControllers' ، ['ngdialog']) ؛ ngdialog) {$ scope.name = 'user' ؛ $ scope.user = "" ؛ $ scope.address = "" ؛ // الحصول على معلومات المستخدم $ http.get ('http: // localhost: 3000/user') زر العنوان ، مربع حوار الوضع $ scope.clicktoaddress = function (address) {$ scope.address = address ؛ ngdialog.open ({template: 'views/test.html' ، // content of the mode distr test. تفاصيل العنوان}) ؛} ؛}]) </span>test.html (اقرأ العنوان في النطاق وعرضه ، يستخدم نمط الجدول bootstrap)
<span style = "font-size: 18px ؛"> <table> <thead> <tr> <th> اسم المستلم </th> <td> الرقم </th> <td> {{address.phone}} </td> </tr> </tr> </lood> </span>user.html (أظهر معلومات المستخدم. عندما لا يكون العنوان فارغًا ، قم بعرض زر العنوان التفصيلي. عند النقر فوق الزر ، اتصل بوظيفة ClickToadDress في وحدة التحكم)
<span style = "font-size: 18px ؛"> <viv> <viv> <viv> إدارة المستخدم </div> <viv> <viv> <div> <input type = "text" placeholder = "search for ... aria-hidden = "true"> </span> </h> <th> avatar </h> <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- Avatar </td> <td ng-if = "user.address.length == 0"> لا يوجد عنوان افتراضي </td> <td ng-if = "user.address.length! = 0" ng-repeat = "educed. type = "button" ng click = "remove (user._id)"> delete </utton> </td> </tbody> </table> </viv> </span>ما ورد أعلاه هو مربع الحوار وضع تنفيذ Bootstrap+AngularJS+NGDialog الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!