Using AngularJS ng-repeat to create tabbed interfaces

Question

Using AngularJS ng-repeat to create tabbed interfaces

In my current scenario, a dynamic number of tabs can be created. When a user clicks on an entry in a commands menu, a new pill-tab pair is added to the existing ones (Note: Bootstrap is used for styling).

The list of tabs is managed within an array in $rootScope. Whenever a new tab needs to be opened, an entry is simply added to the array using the push method. An ng-repeat directive handles the creation of pill-tab pairs.

Everything works smoothly, with tabs and pills being added successfully. However, I'm facing a challenge in setting the newly added tab as the active one immediately upon creation. This is because the creation (addition to the list) happens within a controller and the element is not yet recognized by the DOM.

I considered using a timer, but found this approach to be quite messy and inefficient.

javascript angularjs twitter-bootstrap

Answer 1

Answer №1

In Angular, one powerful tool you can utilize is the $timeout service:

Check out the documentation on $timeout here

For instance, if you have specific tasks to be executed after a directive is rendered and a controller is initialized, simply append the following code snippet at the end of the controller:

$timeout(function(){ $scope.perform_tasks(); } );

This will ensure that the tasks are carried out after the component's digest cycle completes.

Moreover, $timeout provides good testing capabilities, allowing for control in unit tests.

One feasible approach could involve:

Prior to adding a new tab, establish a promise within a parent scope or service
Subsequently, once the child controller is set up, implement a promise resolution using $timeout within that child controller

Answer 2

In Angular, one powerful tool you can utilize is the $timeout service:

Check out the documentation on $timeout here

For instance, if you have specific tasks to be executed after a directive is rendered and a controller is initialized, simply append the following code snippet at the end of the controller:

$timeout(function(){ $scope.perform_tasks(); } );

This will ensure that the tasks are carried out after the component's digest cycle completes.

Moreover, $timeout provides good testing capabilities, allowing for control in unit tests.

One feasible approach could involve:

Prior to adding a new tab, establish a promise within a parent scope or service
Subsequently, once the child controller is set up, implement a promise resolution using $timeout within that child controller

Answer 3

Answer №2

Avoid using timeouts or similar methods because the loading time is unpredictable. My recommendation is to utilize this directive within your ng-repeat:

.directive('onFinishRender', function ($rootScope) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last) {
                $rootScope.$broadcast("ngRepeatFinished");
            }
        }
    };
});

HTML:

<ul>
   <li class="pages" data-ng-repeat="page in sidebarPages" on-finish-render></li>
</ul>

This code will detect when the last item is rendered in ng-repeat and then send a $broadcast event to the controller. In your controller, you need to listen for that event like so:

$rootScope.$on('ngRepeatFinished', function(event, args) {

    // execute desired actions
});

You can also explore $viewContentLoaded

$scope.$on('$viewContentLoaded', function(event, args) {

    // execute desired actions
});

Answer 4

Avoid using timeouts or similar methods because the loading time is unpredictable. My recommendation is to utilize this directive within your ng-repeat:

.directive('onFinishRender', function ($rootScope) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last) {
                $rootScope.$broadcast("ngRepeatFinished");
            }
        }
    };
});

HTML:

<ul>
   <li class="pages" data-ng-repeat="page in sidebarPages" on-finish-render></li>
</ul>

This code will detect when the last item is rendered in ng-repeat and then send a $broadcast event to the controller. In your controller, you need to listen for that event like so:

$rootScope.$on('ngRepeatFinished', function(event, args) {

    // execute desired actions
});

You can also explore $viewContentLoaded

$scope.$on('$viewContentLoaded', function(event, args) {

    // execute desired actions
});

Using AngularJS ng-repeat to create tabbed interfaces

Answer №1

Answer №2

Similar questions

Adding evaluation value to the argument of an onclick JavaScript function in an ASP datalist (Front-End)

Transform arrays within arrays to objects

When communicating with the backend in a React application, the data is not being successfully sent using axios. An error message stating "Unsupported protocol

Determine if the same origin policy is in effect

Updating the value of a localStorage key after each successful AJAX call in JavaScript

Retrieve the id within the parentheses for each checkbox that is checked and re-check each time a checkbox is selected using Kendo UI

The updating of input and output does not happen instantly; there is a delay before changes

The issue arises when AngularJS binding to a JSON object results in the value being

Unlocking the Potential of External Values in Angular Beyond http.then

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

What steps do I need to take in order to make this array equation function properly?

Exploring innerHTML in JavaScript for event listening

Resolving the issue of data transmission within Yii2's framework: Page-to-page data

Listcell XUL with button options

How can I utilize target.event to close the dropdown in Vuejs when clicked outside of it?

Streamlined method for creating forms and charts within SharePoint

How to dynamically generate data with exceljs

Select2 is not displaying correctly as expected

Stop the closure of confirmation box by disabling the space key

Latest Version of Joomla includes Jquery 3.4.3 Files