Angular实现tab切换

实现标签切换功能，即如上图，通过控制标签选中状态，下面表格随之变动。

首先，所有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')
        })
      }])

})