0

Мой 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"
             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...
    };

Проблема в том что все табы загружают контент одновременно, т.е. там выполняется загрузка данных из базы, и она отрабатывает 5 раз. Как сделать чтобы контент загружался только при клике на таб?

Любые предложения.

2
  • Попробуйте добавлять свойство templateUrl для элемента массива tabs при клике на таб, в changeActiveTab. 27 окт 2016 в 5:28
  • Да спасибо, сработало. 27 окт 2016 в 7:13

1 ответ 1

0

Я сделал в итоге так:

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';
        }
    };

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.