Call content from different location in page in Angular Tabs

Question

I have a set of tabs. I want to know how to get content from a different part of the page when the tab is clicked. I can do it by calling a different html page, but is there a way to display content from the same page?

   <tabset vertical="false">
            <tab heading="Scenario 1">Test</tab>
            <tab heading="Scenario 2"></tab>
            <tab heading="Dist as of 12/31/15"></tab>
            <tab heading="Custom Label"></tab>
   </tabset>

For example, how would I get the content for Scenario1 to display in the tab for scenario one. I know I can put everything in-between the tab markup, but is there another way to do it.

.js page

(function () {
'use strict'

var DistributionApp = angular.module('DistributionApp',
['someApp', 'ctracApp.engagement.services', 'ngRoute']);

DistributionApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/Distribution',
    {
        templateUrl: '/app/Something/Distribution/Distribution.html',
        controller: 'distributionCtrl',
        controllerAs: 'minimumDist'
    });
}]);


DistributionApp.controller('distributionCtrl', ['$location', '$sce', function ($location, $sce) {
    var self = this;
    $scope.setActive = function(current){
        $scope.active = current;
    };

    $scope.amIActive(id)
    {
        if ($scope.active == id)
        {
            return true;
        }
        else
        {
            return false;
        }
    };

    }]);
 });

Answer 1

USING ROUTE PROVIDER

With this aproach, you will use the angular module app, inject the ngRoute so you can manipulate requests. In your index.html file, you can change your div id with a ng-view , so you can change the code of the ng-view with your ngRoute.

On your Tabset, I've added some links to scenario/:id, so I can use the ID dinamically to find the corresponding html in the $routeProvider.

index.html

<html ng-app='app'>
  <body>
    <tabset vertical="false" ng-controller='tabController'>
        <tab a href='#/scenario/1' heading="Scenario 1" ></tab>
        <tab a href='#/scenario/2' heading="Scenario 2"></tab>
        <tab a href='#/scenario/3' heading="Dist as of 12/31/15"></tab>
        <tab a href='#/scenario/4' heading="Custom Label"></tab>
    </tabset>

    <div ng-view>
    </div>

  </body>
    <script src="angular.js">
    <script src="angular-route.js">
    <script src='app.js'>
</html>

scenario1.html

<div>
  This is scenario 01
</div>

app.js

var app = angular.module('app', [ngRoute]);

app.controller('tabController', function(){});

app.config( function($routeProvider) {
  $routeProvider
    .when('/scenario/:ID',
      {
        controller: 'tabController',
        templateUrl: function($routeParams) {
          return 'scenario' + routeParams.ID + '.html' }
      })
    .otherwise( { template: '<div> Ohh, 404! :D </div> });
});

The templateUrl will guide the path to the file while the template will display direct HTML. The templareUrl can receive both a path or a function that return a path. In this case, I needed acess to the :ID, which is a Route Param, so I needed to inject the $routeParams dependency in order to acess it.

The .otherwise method will guide to the a default 404 page.

HIDING AND SHOWING CONTENT FROM THE SAME PAGE

First, everything is on the same page. I'm using ng-if , but I could use ng-show or ng-hide too. With these three, we can display or hide content based on a scope variable or scope function. In something.html, I'm calling a function on the tabs to set the active tab and, below that, I have all the divs that will only display if the corresponding tab is active.

something.html

    <tabset vertical="false" ng-controller='tabController'>
        <tab ng-click='setActive(1)' heading="Scenario 1" ></tab>
        <tab ng-click='setActive(2)' heading="Scenario 2"></tab>
        <tab ng-click='setActive(3)' heading="Dist as of 12/31/15"></tab>
        <tab ng-click='setActive(4)' heading="Custom Label"></tab>
    </tabset>

    <div ng-if='amIActive(1)' id='Scenario1'>
        This is test content 1
    </div>

    <div ng-if='amIActive(2)' id='Scenario2'>
        This is test content 2
    </div>

    <div ng-if='amIActive(3)' id='Scenario3'>
        This is test content 3
    </div>

    <div ng-if='amIActive(4)' id='Scenario4'>
        This is test content 4
    </div>

app.js

app.controller('tabController', function(){
  $scope.setActive = function(current){
    $scope.active = current;
  };

  $scope.amIActive = function(id) {
    if($scope.active == id){
      return true;
    } else { return false; }
  };
});

Call content from different location in page in Angular Tabs

Question

1 answers

solution1
1 ACCPTED 2015-09-03 17:52:11

Call content from different location in page in Angular Tabs

Question

1 answers

solution1 1 ACCPTED 2015-09-03 17:52:11

solution1
1 ACCPTED 2015-09-03 17:52:11