實現標簽切換功能，即如上圖，通過控制標簽選中狀態，下面表格隨之變動。

首先，所有tab標簽是一個html頁面。下面不同表格是一個html界面。并分別對應一個js文件。暫時命名為，parent.html、parent.js、child1.html、child2.html。在parent.html中通過include一個變量控制加載child1.html。

<div oc-lazy-load='eca/designer/visual/vismod/ecavismod.js' class="fill-container"><div ng-controller="ctrVismod" class="fill-container"><div style="height:50px;float:left;width:100%"><div class=" hidden-xs" style="overflow-x: auto;height: 50px;"><ul class="nav navbar-nav navbar-left vismodNav" style="min-width:900px;"><li class="vismodOn"><a ng-click="Tree()">圖層樹</a></li><li><a ng-click="Toolbar()">工具欄</a></li><li><a ng-click="Fasttips()">快速查詢</a></li><li><a ng-click="Space()">空間查詢</a></li><li><a ng-click="Topic()">專題圖</a></li><li><a ng-click="ordinate()">坐標系</a></li><li><a ng-click="Compliance()">合規性檢查</a></li><li><a ng-click="Conflict()">沖突分析</a></li><li><a ng-click="basemap()">底圖配置</a></li><li><a ng-click="Stantbook()">多規臺賬</a></li><li><a ng-click="layerCut()">圖層切換</a></li></ul></div></div><div ng-include="vismodbtn"></div></div> </div>

在parent.js中通過指定定函數，并給include指定的變量付child.html地址來確定加載其中的child.html。

define(['eca-core','ui-router'],function () {var appModule = angular.module('eca.ecaVismod', ['ui.router']);appModule.controller('ctrVismod',['$scope',function ($scope) {//默認打開$scope.vismodbtn="eca/designer/visual/vismod/vismodTree/vismodTree.html"; // 工具欄$scope.Toolbar=function () {$scope.vismodbtn="eca/designer/visual/vismod/vistoolbar/vismodtool.html";}//快速查詢$scope.Fasttips=function () {$scope.vismodbtn="eca/designer/visual/vismod/vismodfast/vismodFast.html";}//圖層樹配置$scope.ordinate=function () {$scope.vismodbtn="eca/designer/visual/vismod/coordinate/coordinate.html";}//圖層樹配置$scope.Tree=function () {$scope.vismodbtn="eca/designer/visual/vismod/vismodTree/vismodTree.html";}//空間查詢配置$scope.Space=function () {$scope.vismodbtn="eca/designer/visual/vismod/visSpatialQuery/vismodSpace.html";}//專題圖配置$scope.Topic=function () {$scope.vismodbtn="eca/designer/visual/vismod/vismodTopic/vismodTopic.html";}//合規性檢查配置$scope.Compliance=function () {$scope.vismodbtn="eca/designer/visual/vismod/visCompliance/visCompliance.html";}//沖突分析配置$scope.Conflict=function () {$scope.vismodbtn="eca/designer/visual/vismod/visConflict/visConflict.html";} //多規臺賬$scope.Stantbook=function () {$scope.vismodbtn="eca/designer/visual/vismod/vismodMany/vismodMany.html";}//底圖配置$scope.basemap=function () {$scope.vismodbtn="eca/designer/visual/vismod/basemap/basemap.html";}//圖層切換$scope.layerCut=function () {$scope.vismodbtn="eca/designer/visual/vismod/vislayerCut/layerCut.html";}//切換選項$('.vismodNav li').click(function () {$('.vismodOn').removeAttr("class");$(this).attr('class','vismodOn')})}])})

總結

以上是生活随笔為你收集整理的Angular实现tab切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。