Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <ul class="nav nav-tabs">
- <li class="active"><a href="#/view1">Home</a></li>
- <li><a href="#/view2">Menu 1</a></li>
- </ul>
- <div ng-view></div>
- <div>Angular seed app: v<span app-version></span></div>
- 'use strict';
- angular.module('myApp.view1', ['ngRoute'])
- .config(['$routeProvider', function($routeProvider) {
- $routeProvider.when('/view1', {
- templateUrl: 'view1/view1.html',
- controller: 'View1Ctrl'
- });
- }])
- .controller('View1Ctrl', [function() {
- }]);
- <div>here's some html</div>
- <div class="container">
- <div id="content">
- <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
- <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
- <li><a href="#orange" data-toggle="tab">Orange</a></li>
- <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
- <li><a href="#green" data-toggle="tab">Green</a></li>
- <li><a href="#blue" data-toggle="tab">Blue</a></li>
- </ul>
- <div id="my-tab-content" class="tab-content">
- <div class="tab-pane active" id="red">
- <h1>Red</h1>
- <p>red red red red red red</p>
- </div>
- <div class="tab-pane" id="orange">
- <h1>Orange</h1>
- <p>orange orange orange orange orange</p>
- </div>
- <div class="tab-pane" id="yellow">
- <h1>Yellow</h1>
- <p>yellow yellow yellow yellow yellow</p>
- </div>
- <div class="tab-pane" id="green">
- <h1>Green</h1>
- <p>green green green green green</p>
- </div>
- <div class="tab-pane" id="blue">
- <h1>Blue</h1>
- <p>blue blue blue blue blue</p>
- </div>
- </div>
- </div>
- <div ng-if="vm.showTab2">
- var vm = this;
- vm.showTab1 = true;
- vm.showTab2 = false;
- vm.ToggleTab = function(tabId) {
- vm.showTab1 = tabId === ShowTab1;
- vm.showTab2 = tabId === ShowTab2;
- ...
- }
- ...
- init();
- function init() {
- // Get the tabID parameter from the URL (via $routeParams)
- var tabId = $routeParams.tabId;
- if (tabId !== undefined) {
- vm.ToggleTab(tabId);
- }
- ...
- }
- .config(['$routeProvider', function($routeProvider) {
- $routeProvider.when('/view:tabId', {
- templateUrl: 'view1/view.html',
- controller: 'ViewCtrl'
- });
- }])
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement