My html code:

<ul class="nav nav-tabs"> <li ng-class="{active: isActiveTab(tab.id)}" ng-repeat="tab in tabs"> <a href="" ng-click="changeActiveTab(tab.id)" data-toggle="tab" ng-bind="tab.label"></a> <div class="notify"><span>{{tab.count}}</span></div> </li> </ul> <div class="tab-content csbi-body-bg" changeable-height> <div class="tab-pane fade csbi-body-work" ng-class="{'in active': isActiveTab(tab.id)}" ng-repeat="tab in tabs" ng-include="tab.templateUrl"> </div> </div>

Controller Angularjs:

 $scope.tabs = [ { id: 'unregistered', label: 'Незарегистрированные', templateUrl: '/Angular/Templates/Directions/Unregistered.html', count: 7 }, { id: 'fromTO', label: 'Зарегистрированные из ТО/ЛО', templateUrl: '/Angular/Templates/Directions/RegisteredFromTO.html', count: 8 }, { id: 'fromPOO', label: 'Зарегистрированные от ПОО', templateUrl: '/Angular/Templates/Directions/RegisteredFromPOO.html', count: 9 }, { id: 'unassigned', label: 'Неназначенные', templateUrl: '/Angular/Templates/Directions/Unassigned.html', count: 27 }, { id: 'assigned', label: 'В работе', templateUrl: '/Angular/Templates/Directions/InProcess.html', count: 19 } ]; $scope.activeTab = $scope.tabs[0].id; $scope.changeActiveTab = function (tab) { $scope.activeTab = tab; //do some work... };

The problem is that all tabs download content simultaneously, i.e. there the data is loaded from the database, and it works 5 times. How to make content download only when clicking on a tab?

Any suggestions.

  • Try adding the templateUrl property to the tabs array element when clicking on a tab in changeActiveTab . - Stepan Kasyanenko
  • Yes, thanks, it worked. - endovitskiiy

1 answer 1

I ended up with this:

html:

 <ul class="nav nav-tabs"> <li ng-class="{active: isActiveTab(tab.id)}" ng-repeat="tab in tabs"> <a href="" ng-click="changeActiveTab(tab.id)" data-toggle="tab" ng-bind="tab.label"></a> <div class="notify"><span>{{tab.count}}</span></div> </li> </ul> <div class="tab-content csbi-body-bg" changeable-height> <div class="tab-pane fade csbi-body-work" ng-class="{'in active': isActiveTab(tab.id)}" ng-repeat="tab in tabs"> <div ng-if="tab.id == activeTab" ng-include="activeTabTemplateUrl" class="full-height"> </div> </div> </div>

angularjs:

 $scope.tabs = [ { id: 'unregistered', label: 'Незарегистрированные', count: 7 }, { id: 'fromTO', label: 'Зарегистрированные из ТО/ЛО', count: 8 }, { id: 'fromPOO', label: 'Зарегистрированные от ПОО', count: 9 }, { id: 'unassigned', label: 'Неназначенные', count: 27 }, { id: 'assigned', label: 'В работе', count: 19 } ]; $scope.activeTab = $scope.tabs[0].id; $scope.activeTabTemplateUrl = '/Angular/Templates/Directions/Unregistered.html'; $scope.changeActiveTab = function (tab) { $scope.activeTab = tab; if ($scope.activeTab == 'unregistered') { $scope.activeTabTemplateUrl = '/Angular/Templates/Directions/Unregistered.html'; } else if ($scope.activeTab == 'fromTO') { $scope.activeTabTemplateUrl = '/Angular/Templates/Directions/RegisteredFromTO.html'; } else if ($scope.activeTab == 'fromPOO') { $scope.activeTabTemplateUrl = '/Angular/Templates/Directions/RegisteredFromPOO.html'; } else if ($scope.activeTab == 'unassigned') { $scope.activeTabTemplateUrl = '/Angular/Templates/Directions/Unassigned.html'; } else if ($scope.activeTab == 'assigned') { $scope.activeTabTemplateUrl = '/Angular/Templates/Directions/InProcess.html'; } };