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">タグのコンテンツ</div> <div> <div ng-show = "vm.activetab == 2">タグ2のコンテンツ>ブートストラップ。 <hr/> Angular-bootstrapのタブセット指令を介して実装することもできます。 strict '; angular.module（' ngshowcaseapp '）。コントローラー（' ctrl.show.tab '、function（$ scope）{var vm = $ scope.vm = {};}）;。tab-content.tab-bordered {border：1px lightgray;ボーダートップ：なし;パディング：15px; Border-Radius：0 0 4px 4px;}2。カスタマイズされたコマンド実装タグページ
<！doctype html> <html lang = "en" ng-app = "demo"> <head> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javascript"> </> <src = "lib/angular-route.js" type = "text/javascript"> </script> <script src = "lib/jquery-2.1.4.min.js"> </script> <link rel = "href =" href = "css/bootstrap.css" type = "text/css"/> <style> .btn-group：;左：40px; } .list-group {position：relative;左：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> <script type = "text/ng template" id = "div> < ng-mouseover = "flag = 3" ng-mouseleave = "flag = 4"> <a href = "＃"> {{name}} </a> </li> </ul> </div> <div> <div> div> div = "list3" ng-show = "flag == 3" ng-mouseover = "flam ng-click = "fun1（）"> <a href = "＃"> action </a> </li> <li> <a href = "＃">別のアクション</a> </li> <li> <a href = "＃">何か他の</a> </a> </li> <li> <a href = " </script> </div> </body> <scrip> var demo = angular.module（ "demo"、[]）; demo.controller（ "directivecontrol"、function（$ scope）{}）; demo.directive（ "list"、[function（）{return {restrict： 'ea'、templateurl： 'list.html'、scope：{value： '= ngmodel'}、link：function（scope、attr、attr）{scope.name = "home"; scope.lists = [{name '' '' '' '' '' '}' '}' '}' fimp. function（）{scope.value = true; console.log（ "a"）}}}] </script> </html>（1）まず第一に、指示をルートタグに記述する必要があるという問題を解決する必要があり、divに包まれなければなりません。
（2）ng-modelを使用して、命令の外側にパラメーターを渡すときに変数を宣言します。
指令でスコープを使用：{
値： 'ngmodel'
}値を割り当てます
要約します
上記は、AngularJS実装タブに関するものです。この記事が、Angularjsを学んだり使用したりするのに役立つことを願っています。ご質問がある場合は、メッセージを残してコミュニケーションをとることができます。