This is a migrated thread and some comments may be shown as answers.

Populating tabs in tabStrip dynamically with AngularJS

1 Answer 528 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Navin
Top achievements
Rank 1
Navin asked on 27 Sep 2014, 02:39 PM
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

1 Answer, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 01 Oct 2014, 07:06 AM
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!
 
Tags
TabStrip
Asked by
Navin
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Share this question
or