Populating tabs in tabStrip dynamically with AngularJS

2 posts, 0 answers
  1. Navin
    Navin avatar
    2 posts
    Member since:
    Sep 2014

    Posted 27 Sep 2014 Link to this post

    Hi,
    I am trying to populate tabs dynamically with Angular JS. The no. of tabs is controlled by data retrieved from database.
    I am not sure what is going wrong. It works fine if I return the JSON from controller without using promise service. But I need promise service because I in the tab content, I have to populate the kendo Pie chart dynamically. I would appreciate any help. 

    Following is what I am trying out in the view:

    <div kendo-tab-strip>
            <ul>
                <li ng-repeat="tab in tabs" class="{{tab.headerClass}}">{{tab.title}}</li>
            </ul>
    <div ng-repeat="tab in tabs">{{tab.content}}</div> 
    </div>

    Angular controller looks like:

    myApp.controller("InterestController", ['$scope', '$state', 'dataService', function ($scope, $state, dataService) {
    dataService.getTabData().then(function (data) {        
            $scope.tabs = [];
            var headerClass = '';
            for(var i = 0; i < data.length; i++){
                if(i == 0){
                    headerClass = 'k-state-active'; // make the first tab auto selected
                }
                $scope.tabs.push({'title' : data[i].title, 'headerClass' : headerClass, 'content' : data[i].content});
                headerClass = '';
            }

            console.log($scope.tabs); // I see data perfectly in console
        });
    }])

    Angular service looks like following :
    myAppp.service('dataService', ['$q', function ($q) {
    this.getTabData = function(){
            var deferred = $q.defer();

            new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/some_data_provider/data.json",
                        dataType: "json"
                    }
                }
            }).fetch(function(){
                deferred.resolve(this.data());
            });

            return deferred.promise;
        }
    }]);

    Thanks

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 01 Oct 2014 Link to this post

    Hello Navin,

    In this scenario, you can take advantage of the yet undocumented k-ng-delay attribute - please check this example for what I mean. 

    Please let me know if this approach works for your case. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top