带有UI.Router的AngularJS选项卡

时间:2016-05-01 20:24:52

标签: angularjs tabs router

我有一个单页应用,左侧有垂直表格。我能够点击每个标签并显示预期的内容。我遇到的问题是我无法以编程方式将 ng-checked 更改为" true"对于选定的选项卡和" false"对于未选中的选项卡。因此,所选选项卡始终位于选项卡列表的第一个选项卡上。我已经提供了运行此应用程序的所有代码(6个文件),因此您可以看到我在说什么

Index.html

<html  ng-app= "mainApp">
<head>
<title>OneilAndK</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/uxcore.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
        <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
        <script src="routing.js"></script>
<link rel="stylesheet" href="verticalTab.css" rel="stylesheet"/>
</head>

<body>


<div class="tabordion">


  <section id="section1">
    <input type="radio" name="sections" id="option1" ng-checked = true >
    <label ui-sref="About" for="option1">About</label>
    <article>

        <div  ui-view></div>
    </article>
  </section>


  <section id="section2">
    <input type="radio" name="sections" id="option2" ng-checked = false >
    <label ui-sref="Knowledge" for="option2"  >Knowledge</label>
    <article>
          <div  ui-view></div>
    </article>
  </section>


  <section id="section3">
    <input type="radio" name="sections" id="option3" ng-checked = false >
    <label ui-sref="Contact" for="option3"  >Contact</label>
    <article>
          <div  ui-view></div>
    </article>
  </section>
</div>


</body>
</html>

About.html

<p >This is my about page</p>

Contact.html

<p >This is my Contact page</p>

Knowledge.html

<p >This is my knowledge page</p>

routing.js

var app = angular.module('mainApp', ['ui.router']);

app.config(['$stateProvider','$urlRouterProvider', function($stateProvider,$urlRouterProvider){

  $urlRouterProvider.otherwise("Home.html")

  $stateProvider
    .state('Contact', {url:"/Contact",templateUrl:"Contact.html"})
    .state('Knowledge', {url:"/Knowledge",templateUrl:"Knowledge.html"})
    .state('About', {url:"/About",templateUrl:"About.html"})

  }]);

verticalTab.css

h1 {
  color: #333;
  font-family: arial, sans-serif;
  margin: 1em auto;
  width: 80%;
}

.tabordion {
  color: #333;
  display: block;
  font-family: arial, sans-serif;
  margin: auto;
  position: relative;
  width: 80%;
}

.tabordion input[name="sections"] {
  left: -9999px;
  position: absolute;
  top: -9999px;
}

.tabordion section {
  display: block;
}

.tabordion section label {
  background: #ccc;
  border:1px solid #fff;
  cursor: pointer;
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  padding: 15px 20px;
  position: relative;
  width: 180px;
  z-index:100;
}

.tabordion section article {
  display: none;
  left: 230px;
  min-width: 300px;
  padding: 0 0 0 21px;
  position: absolute;  
  top: 0;
}

.tabordion section article:after {
  background-color: #ccc;
  bottom: 0;
  content: "";
  display: block;
  left:-229px;
  position: absolute;
  top: 0;
  width: 220px;
  z-index:1;
}

.tabordion input[name="sections"]:checked + label { 
  background: #eee;
  color: #bbb;
}

.tabordion input[name="sections"]:checked ~ article {
  display: block;
}


@media (max-width: 533px) {

  h1 {
    width: 100%;
  }

  .tabordion {
    width: 100%;
  }

  .tabordion section label {
    font-size: 1em;
    width: 160px;
  }  

 .tabordion section article {
    left: 200px;
    min-width: 270px;
  } 

  .tabordion section article:after {
    background-color: #ccc;
    bottom: 0;
    content: "";
    display: block;
    left:-199px;
    position: absolute;
    top: 0;
    width: 200px;

  }  

}


@media (max-width: 768px) {
  h1 {
    width: 96%;
  }

  .tabordion {
    width: 96%;
  }
}


@media (min-width: 1366px) {
  h1 {
    width: 70%;
  }

  .tabordion {
    width: 70%;
  }
}

1 个答案:

答案 0 :(得分:0)

我会使用angular-ui-bootstrap来创建标签面板。为了动态生成标签标题,您可以使用stateHelper模块。

使用stateHelper,您可以创建一个配置对象,您也可以在ng-repeat内使用该对象生成选项卡面板的导航栏。

使其工作的唯一棘手的事情是$stateChangeStart侦听器来计算活动路由的索引。找到索引后,它将通过ui-bootstrap变量传递给$rootScope.active

请查看下面的演示或此jsfiddle

angular.module('demoApp', ['ui.router', 'ui.bootstrap', 'ui.router.stateHelper'])
    .run(['$state', '$rootScope', 'TABS_CONFIG', function($state, $rootScope, TABS_CONFIG) {
        // run needed to set the correct tab-index on load
        var tabs = TABS_CONFIG.children;
        $rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
            angular.forEach(tabs, function(item, index) {
                if (item.name == toState.name) {
                    $rootScope.active = index;
                }
            });
        });
    }])
    .constant('TABS_CONFIG', {
        name: 'tabs',
        templateUrl: 'tabs.html',
        abstract: true,
        children: [{
                url: '/about',
                name: 'about',
                template: '<div class="container"><h1>about</h1></div>'
                    //templateUrl: 'about.html'
            }, {
                url: '/contact',
                name: 'contact',
                template: '<div class="container"><h1>contact</h1></div>'
                    //templateUrl: 'contact.html'
            }, {
                url: '/knowhow',
                name: 'know-how',
                template: '<div class="container"><h1>knowhow</h1></div>'
                    //templateUrl: 'knowhow.html'
            },

        ]
    })
    .controller('mainController', function($scope, $state, TABS_CONFIG) {
        $scope.tabs = TABS_CONFIG.children;
        
        $scope.go = function(tab) {
            //$scope.active = $scope.tabs.indexOf(tab);
            $state.go(tab.name);
        };
    })
    .config(routes);

function routes($urlRouterProvider, stateHelperProvider, TABS_CONFIG) {
    $urlRouterProvider.otherwise('/contact');

    stateHelperProvider.state(TABS_CONFIG, {
        keepOriginalNames: true
    });
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdn.rawgit.com/marklagendijk/ui-router.stateHelper/master/statehelper.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <div ui-view></div>

    <script type="text/ng-template" id="tabs.html">
        <uib-tabset active="active">
            <uib-tab index="$index" ng-repeat="tab in tabs" ng-click="go(tab)">
                <uib-tab-heading>{{tab.name}}</uib-tab-heading>
                <div ui-view></div>
            </uib-tab>
        </uib-tabset>
    </script>
</div>