Tuesday, 30 May 2017

AngularJS problems on rendering tabs dynamically

Every time I click on newPage button, a tab will be created (angular-ui). Http.get() (renderAll) loads items and ng-repeat displays them. Sometimes the tab is not render, so I have to refresh the page for the tab to show up.

$scope.newPage : creates a new page on click. I refresh the main scope after a new page created.

$scope.renderAll = function(currentTabIndex){
    $scope.number = 0;
    TabFactory.getAll(_id).then(function(response){
        $scope.columns = [];
        $scope.columns = response.data;
        $timeout(function(){
            if(currentTabIndex <= 0){
                $scope.activeTabIndex = 0;
            } else {
                $scope.activeTabIndex = currentTabIndex;
            }
        });
    }, function(error){
    });
}

$scope.newPage = function(){
    PageFactory.newPage( _id ).then(function(response){
        $scope.renderAll($scope.activeTabIndex); // Refresh the content everytime newPage() is clicked
    }, function(err){
        console.log(err);
    });
};


<uib-tabset  active="activeTabIndex"  id="sortable">
    <uib-tab ng-repeat="(keyC, page) in columns.pages"  index="keyC">
        <uib-tab-heading>
            <span>Page </span>              
        </uib-tab-heading>      
    </uib-tab>
    <li class="uib-tab nav-item unsortable">
        <button type="button" class="btn btn-default btn-small unsortable" ng-click="newPage()" aria-label="toggle fullscreen">
            <i class="fa fa-plus" aria-hidden="true"></i>
        </button>
    </li>
</uib-tabset>

enter image description here

Example: A new page must be created when I click on + button, but sometimes the tab is created and sometimes doesn't. So i need to refresh the page when it doesn't work.



via carlos

No comments:

Post a Comment