實(shí)現(xiàn)標(biāo)簽切換功能，即如上圖，通過(guò)控制標(biāo)簽選中狀態(tài)，下面表格隨之變動(dòng)。

首先，所有tab標(biāo)簽是一個(gè)html頁(yè)面。下面不同表格是一個(gè)html界面。并分別對(duì)應(yīng)一個(gè)js文件。暫時(shí)命名為，parent.html、parent.js、child1.html、child2.html。在parent.html中通過(guò)include一個(gè)變量控制加載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()">圖層樹(shù)</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()">坐標(biāo)系</a></li><li><a ng-click="Compliance()">合規(guī)性檢查</a></li><li><a ng-click="Conflict()">沖突分析</a></li><li><a ng-click="basemap()">底圖配置</a></li><li><a ng-click="Stantbook()">多規(guī)臺(tái)賬</a></li><li><a ng-click="layerCut()">圖層切換</a></li></ul></div></div><div ng-include="vismodbtn"></div></div> </div>

在parent.js中通過(guò)指定定函數(shù)，并給include指定的變量付child.html地址來(lái)確定加載其中的child.html。

define(['eca-core','ui-router'],function () {var appModule = angular.module('eca.ecaVismod', ['ui.router']);appModule.controller('ctrVismod',['$scope',function ($scope) {//默認(rèn)打開(kāi)$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";}//圖層樹(shù)配置$scope.ordinate=function () {$scope.vismodbtn="eca/designer/visual/vismod/coordinate/coordinate.html";}//圖層樹(shù)配置$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";}//合規(guī)性檢查配置$scope.Compliance=function () {$scope.vismodbtn="eca/designer/visual/vismod/visCompliance/visCompliance.html";}//沖突分析配置$scope.Conflict=function () {$scope.vismodbtn="eca/designer/visual/vismod/visConflict/visConflict.html";} //多規(guī)臺(tái)賬$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";}//切換選項(xiàng)$('.vismodNav li').click(function () {$('.vismodOn').removeAttr("class");$(this).attr('class','vismodOn')})}])})

總結(jié)

以上是生活随笔為你收集整理的Angular实现tab切换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。