This topic contains 1 reply, has 2 voices, and was last updated by Sean Sean 2 years, 11 months ago.

Angular Dynamic Tabs


  • TAGrafx
    Participant

    Posts: 16
    Member Reply #2070

    How can I pull an html page into an angular tab (or any portlet) dynamically using a template or ajax?
    If the pages are using allot of HTML it is very difficult to inline it into the JS file like on Title 2.

    PLEASE send example if possible, code below is from the theme just tweaked.

    // Tabs demo controller
    function TabsDemoCtrl($scope) {
    $scope.tabs = [
    { title:’Dynamic Title 1′, templateUrl: ‘views/profile/help.html’ },
    { title:’Dynamic Title 2′, content:’Dynamic content 2′, disabled: true }
    ];

    /*
    $scope.alertMe = function() {
    setTimeout(function() {
    alert(‘You\’ve selected the alert tab!’);
    });
    };
    */

    }

     

    HERE IS THE HTML CODE I AM USING

    <!– BEGIN TABS DEMO –>
    <div class=”portlet-body”>
    <div class=”row”>
    <div class=”col-lg-12″>
    <div ng-controller=”TabsDemoCtrl”>
    <tabset>
    <tab heading=”Static title”>Static content</tab>
    <tab ng-repeat=”tab in tabs” heading=”{{tab.title}}” active=”tab.active” disabled=”tab.disabled”>
    {{tab.content}}
    </tab>
    <tab select=”alertMe()”>
    <tab-heading>
    <i class=”glyphicon glyphicon-bell”></i> Alert!
    </tab-heading>
    I’ve got an HTML heading, and a select callback. Pretty cool!
    </tab>
    </tabset>
    </div> <!– END ng-controller=TabsDemoCtrl –>
    </div>
    </div>
    </div><!– END PORTLET-BODY –>

    • This topic was modified 2 years, 11 months ago by  TAGrafx.
    Sean
    Sean
    Keymaster

    Posts: 4481
    Support Staff Reply #2096

    Hi :),

    Thanks for your feedback. I would suggest you to check following links to get starting with ajax tabs in angularjs:

    http://stackoverflow.com/questions/19781004/tabs-with-angular-loading-tab-content-on-click-only-with-http
    https://github.com/RichPollock/Angular-AJAX-Tabs

    Thanks.

Tagged: 

You must be logged in to reply to this topic.