1. ใช้หน้าแท็กผ่านคำแนะนำทั่วไป
<link rel = "stylesheet" href = "views/show/tab.css"/> <div>< ul ng-init = "vm.activetab = 1"> <li ng-class = "{active: vm.activetab == 1}"> <a href = "JavaScript:;" ng-click = "vm.activetab = 1"> tag1 </a> </li> <li ng-class = "{active: vm.activetab == 2}"> <a href = "JavaScript:;" ng-click = "vm.activetab = 2"> tag2 </a> </li> </ul> <div> <div ng-show = "vm.activetab = 2}"> <a href = "JavaScript:;" ng-click = "vm.activetab = 2"> tag2 </a> </li> </ul> <div> <div ng-show = "vm.activetab = 2}"> <a href = "JavaScript:;" ng-click = "vm.activetab = 2"> tag2 </a> </li> </ul> <div> <div ng-show = "vm.activetab == 1"> เนื้อหาของแท็ก 1 </div> <div ng-show = "vm.activetab == 2"> เนื้อหาของแท็ก 2 </div> bootstrap <hr/> สามารถนำไปใช้กับคำสั่ง tabset ของ Angular-Bootstrap ดู <a href = "http://angular-ui.github.io/bootstrap/#/tabs" target = "blank"> demo อย่างเป็นทางการ </a> ' ฟังก์ชั่น ($ scope) {var vm = $ scope.vm = {};}) ;. tab-content.tab-bordered {border: 1px lightgray ของแข็ง; ชายแดนด้านบน: ไม่มี; ช่องว่าง: 15px; แนวชายแดน: 0 0 4px 4px;}2. หน้าแท็กการใช้งานคำสั่งที่กำหนดเอง
<! doctype html> <html lang = "en" ng-app = "demo"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "ข้อความ/javascript" type = "text/javascript"> </script> <script src = "lib/jQuery-2.1.4.min.js"> </script> <link rel = "stylesheet" href = "css/bootstrap.css" type = "css"/> ซ้าย: 40px; } .List-Group {ตำแหน่ง: ญาติ; ซ้าย: 0; } .List-Group-item {} #list3 {width: 200px; } </style> </head> <body> <div ng-controller = "directiveControl"> <div ng-class = "{'hidden': value}"> </div> <div> <list ng-model = "value"> </list> </div> ng-mouseover = "flag = 3" ng-mouseleave = "flag = 4"> <a href = "#"> {{name}} </a> </li> </ul> </div> <div id = "list3" ng-show = "flag == 3" ng-mouseover = ng-click = "fun1 ()"> <a href = "#"> การกระทำ </a> </li> <li> <a href = "#"> การกระทำอื่น </a> </li> <li> <a href = "#"> สิ่งอื่นที่นี่ </a> </li> <li> </script> </div> </body> <script> demo var = angular.module ("demo", []); Demo.Controller ("DirectiveControl", ฟังก์ชั่น ($ scope) {}); demo.directive ("list", [function () {return {จำกัด : 'ea', templateurl: 'list.html', ขอบเขต: {value: '= ngmodel'}, ลิงก์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attr) {scope.name = "home"; () {scope.value = true; console.log ("A")}}}}}])(1) ก่อนอื่นเราต้องแก้ปัญหาที่ต้องเขียนคำแนะนำในแท็กรูทและต้องห่อใน div
(2) ใช้ NG-Model เพื่อประกาศตัวแปรเมื่อผ่านพารามิเตอร์นอกคำสั่ง
ใช้ขอบเขตใน Directive: {
ค่า: 'ngmodel'
} เพื่อกำหนดค่า
สรุป
ข้างต้นคือทั้งหมดเกี่ยวกับแท็บการใช้งาน AngularJS ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับทุกคนในการเรียนรู้หรือใช้ AngularJS หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร