บทความนี้ส่วนใหญ่แนะนำ "กล่องโต้ตอบ" AngularJS+Bootstrap+Ngdialog Mode Mode " นักเรียนที่มีความสนใจในการสอน JavaScript สามารถอ้างถึงได้: เมื่อเสร็จสิ้นระบบการจัดการพื้นหลังคุณต้องใช้ตารางเพื่อแสดงข้อมูลของผู้ใช้ที่ลงทะเบียน แต่ที่อยู่ผู้ใช้นั้นยาวเกินไปและยากที่จะแสดง ดังนั้นหากคุณต้องการสร้างกล่องโต้ตอบโหมดเมื่อคุณคลิกปุ่มที่อยู่โดยละเอียดกล่องโต้ตอบจะปรากฏขึ้นและแสดงที่อยู่
เอฟเฟกต์มีดังนี้:
โดยการตรวจสอบข้อมูลเลือกที่จะใช้ ngdialog ซึ่งเป็นกล่องโต้ตอบรูปแบบและหน้าต่างป๊อปอัพสำหรับแอปพลิเคชัน Angular.js Ngdialog มีขนาดเล็กมาก (? 2K) มี API ที่เรียบง่ายปรับแต่งได้สูงผ่านธีมโดยมีการพึ่งพาที่ไม่ซ้ำกันใน Angular.js
ที่อยู่ ngdialog github: https://github.com/likestore/ngdialog
การสาธิต ngdialog: 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-demealog/0.3.7/33.73 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
ฉีดพึ่งพาในคอนโทรลเลอร์ใน user.js
<span style = "ตัวอักษรขนาด: 18px;"> var usercontrollers = angular.module ('usercontrollers', ['ngdialog']); usercontrollers.controller ('usercontroller', ['$ scope', '$ http' ngdialog) {$ spope.name = 'ผู้ใช้'; $ scope.user = ""; $ scope.address = ""; // รับข้อมูลผู้ใช้ $ http.get ('http: // localhost: 3000/ผู้ใช้') ปุ่มที่อยู่กล่องโต้ตอบโหมด $ scope.clicktoaddress = ฟังก์ชั่น (ที่อยู่) {$ scope.address = ที่อยู่; ngdialog.open ({เทมเพลต: 'views/test.html', // เนื้อหาของกล่องโต้ตอบโหมด: scume: scumpe. รายละเอียด});};}]) </span>test.html (อ่านที่อยู่ในขอบเขตและแสดงมันสไตล์ตารางใช้ bootstrap)
<span style = "ตัวอักษรขนาด: 18px;"> <bable> <thead> <tr> <th> ชื่อผู้รับ </th> <td> {{address.name}} </td> </tr> <tr> <th> ที่อยู่ของผู้รับ </th> <td> Number </th> <td> {{address.phone}} </td> </tr> </tr> </table> </span>user.html (แสดงข้อมูลผู้ใช้เมื่อที่อยู่ไม่ว่างให้แสดงปุ่มที่อยู่โดยละเอียดเมื่อคลิกปุ่มโทรฟังก์ชัน ClickToaddress ในคอนโทรลเลอร์)
<span style = "ตัวอักษรขนาด: 18px;"> <div> <div> <div> การจัดการผู้ใช้ </div> <div> <div> <อินพุตประเภท = "ข้อความ" placeholder = "ค้นหา ... " ng-model = 'search'> <span> <button type = "button"> ไป! aria-hidden = "true"> </pan> </th> <th> Avatar </th> <th> ที่อยู่เริ่มต้น </th> <th> การดำเนินการ </th> </tbody> <ttr ng-repeat = "ผู้ใช้ในผู้ใช้ | ตัวกรอง: ค้นหา" > <td> {{user.username}} </td> <td> {{user.residualpayment}} </td> <td ng-if = "user.url! Avatar </td> <td ng-if = "user.address.length == 0"> ไม่มีที่อยู่เริ่มต้น </td> <td ng-if = "user.address.length! = 0" ng-repeat = "ที่อยู่ใน user.address" ng-click = "clicktoaddress type = "ปุ่ม" ng-click = "ลบ (user._id)"> ลบ </button> </td> </tbody> </table> </div> </span>ด้านบนคือกล่องโต้ตอบ Bootstrap+AngularJS+Ngdialog Mode Mode Mode แนะนำให้คุณรู้จักโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!