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
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