Angular tabs: fetching tab content with $http upon clicking

My project involves managing big forms with a lot of data, and I've been thinking about organizing the information into tabs with separate sections for each tab.

I'm looking for a solution where the content of the tabs is only loaded when clicked on, and once loaded it should stay in memory to avoid reloading every time the tab is selected again.

I came across this example that seems similar to what I have in mind: angular-ui tabs loading template in tab-content

However, it appears to be based on loading a static template:

<tabs>
    <pane active="pane.active"
          heading="{{pane.title}}"
          ng-repeat="pane in panes">
        <div ng-include="pane.content"></div>
    </pane>
</tabs>

Is there a way to dynamically load the content of each pane using $http.get()? It's important to note that the page is already loaded via ng-view routing, so nested routing isn't an option.

UPDATE: Each tab will have unique content, so ideally I would like to provide a function and a template for each tab or something along those lines...

Do you think using angular-ui would be a good approach for implementing this feature?

ajaxangularjstabsangular-ui

Answer №1

Curiosity led me to explore how tabs can be loaded via Ajax. Here's a demo I put together.

Tabs have a select attribute that triggers when selected. So, I utilized the following structure for a tab:

<tab heading="{{tabs[0].title}}" select="getContent(0)">
       <div ng-hide="!tabs[0].isLoaded">
        <h1>Content 1</h1>
          <div ng-repeat="item in tabs[0].content">
            {{item}}
          </div>
      </div>
      <div  ng-hide="tabs[0].isLoaded"><h3>Loading...</h3></div>
   </tab>

Controller:

 $scope.tabs = [
    { title:"AJAX Tab 1", content:[] , isLoaded:false , active:true},
    {  title:"Another AJAX tab", content:[] , isLoaded:false }
  ];


  $scope.getContent=function(tabIndex){

    /* check if data is already available */
    if($scope.tabs[tabIndex].isLoaded){
      return
    }
    /* or request data, delayed to display Loading... instead of cache */
    $timeout(function(){
        var jsonFile='data'+(tabIndex +1)+'.json'
        $http.get(jsonFile).then(function(res){
            $scope.tabs[tabIndex].content=res.data;
            $scope.tabs[tabIndex].isLoaded=true;
        });

    }, 2000)

  }

I would transfer the cache to a service so that if a user switches views and returns, the data will still be in the service cache.

Check out the DEMO

Answer №2

A different strategy involves utilizing the dynamic ng-include:

<tabset>
    <tab ng-repeat="tab in tabs"
         heading="{{tab.heading}}"
         select="setTabContent(tab.content)">
    </tab>
</tabset>
<ng-include src="tabContentUrl"></ng-include>

In this approach, the controller is set up like this:

$scope.tabs = [
    { heading: 'Dashboard', content: 'dashboard' },
    { heading: 'All Nodes', content: 'nodes' },
    { heading: 'Details', content: 'details' },
    { heading: 'Dependencies', content: 'dependencies' }
];

$scope.setTabContent = function(name) {
    $scope.tabContentUrl = "view/" + name + "/index.html";
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incrementing values in ng-repeat object automatically

My project involves extracting game information from mlb.com and utilizing angularjs along with the ng-repeat directive to display it. A sample of the JSON feed is shown below. { "data": { "games": { "next_day_date": "2017-08-19", "mo ...

javascriptangularjsjson

The ajax call is not yielding a successful response, consistently redirecting to the error function

My attempt to retrieve JSON data from a servlet is resulting in an error block response for every call, even though the backend is providing the correct response. Here is my JavaScript code: $(document).ready(function() { $("#submit").on("click", fun ...

javajqueryajaxservlets

What are the ways in which Ajax can be utilized to interact with a dynamically updated Django dropdown

I'm currently developing a web application that involves calculating the distance between two addresses using Google Maps and determining the gas cost based on the vehicle's mpg rating. The project is almost complete, but I need to implement AJAX ...

pythonajaxdjangodynamic-list

Obtaining zip files using AngularJS

Upon entering the following URL in my browser, I am prompted to download a file: My goal is to download this file using an AngularJS HTTP request. I have created a factory for this purpose, but unfortunately, the download is not successful. Even though ...

javascriptajaxangularjs

Communicating the outcome of AJAX calls from Asp.Net Web API: sending success or failure status

For my current project involving an asp.net C# Web API, I am facing issues with posting data from a client using jQuery AJAX. Despite trying two different types of AJAX calls, the code never reaches the success or error functions in the AJAX. Asp.Net Web ...

ajaxasp.net-web-api

How to utilize dot notation in HTML to iterate through nested JSON in AngularJS?

I'm struggling with displaying nested objects loaded from a JSON file in Angular. I've seen examples of using dot notations in HTML to access nested data, but I'm new to Angular and can't seem to get it right. The JSON is valid, but I j ...

javascriptjsonangularjsangularjs-ng-repeat

Attempting to extract Facebook status using jQuery but receiving a null value

I need help obtaining the status updates from a Facebook Page. The feed URL I am using is: When I enter this URL into the browser, it displays the feed correctly. However, when I attempt to retrieve the same feed using AJAX, I receive a null response. Bel ...

jqueryajaxfacebook

Custom AngularJS directive fails to reflect changes in model after selecting a file

I recently created a custom directive called ng-file-chosen, which is supposed to capture the selected file name from an <input> element and bind it to the ng-model passed in. In the code snippet below, the result of ng-file-chosen is linked to mode ...

javascripthtmlangularjsangularjs-directive

Finding the Right Value from a REST Call in AngularJS - A Step-by-Step Guide

In my AngularJS project, I have implemented a select box in two different ways. One method includes static options directly in the HTML along with ng-model, while the other method utilizes ng-options. Both methods successfully populate the select box, but ...

angularjs

Preventing the $_POST action value from being altered to match the ajax page path

My current setup involves using php, jquery, and ajax to update a particular section. The ajax call is executed successfully, but I encounter an issue where the global $_SERVER[SCRIPT_NAME] changes to match the ajax path when the requested data is returned ...

javascriptphpjqueryajaxbootstrap-modal

What is the reason for requiring both a promise and a callback in order to store JSON data in a global variable?

In order to expose fetched JSON data to a global variable, it is necessary to use either a promise or a callback function. However, my current code is utilizing both methods... Currently, I am creating a promise using the .done function in jQuery. Within ...

javascriptjsonajaxcallbackpromise

How to implement datepicker on multiple input fields

Below are the two input fields that have datepicker functionality: <div class="row"> <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22&apos ...

javascriptjqueryangularjs

Tips for executing Cross-Origin-Requests from Firebase Hosting to an AWS Lambda function

Excuse me, I'm still new to web development. I have a basic single-page website hosted on Firebase hosting that retrieves some information from an AWS Lambda function (I didn't use Google Cloud because it didn't support outbound requests fo ...

javascriptjqueryajaxamazon-web-servicesfirebase-hosting

Establishing a JSONP callback function for AJAX across different domains

$('#image_upload_form input').change(function() { if ( $(this).val() == '') return false; $('#image_upload_form').ajaxSubmit({ url: "http://www.test.com/offers/upload_image?callback=?", ...

ajax

Utilizing requirejs or grunt for concatenation and minification greatly enhances the performance of AngularJS implementations

I'm facing a dilemma with my Angular app. I have several JS files included in the index.html file, and when the app loads, all these files are downloaded before the app is ready. <html> ... <script src="scripts/controllers/loginController.js ...

javascriptangularjsrequirejsgruntjs

Unable to retrieve input field in protractor testing

Struggling with accessing an input field in AngularJS/Protractor for testing purposes. Despite the app setting the input fields to their initial values when running on the browser, I am unable to interact with them or modify their contents during testing. ...

angularjsprotractor

Exploring ways to personalize Angular UI Bootstrap tabs to match the styling of Angular Material tabs

Currently, I am utilizing Angular UI Bootstrap in my project. <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <script src="//ajax.googleapis.co ...

javascriptangularjstwitter-bootstrap

What is the best way to retrieve a file using XMLHTTPRequest and Ajax?

I am currently using window.location.href to download a file, but this method requires a second call to my servlet which takes about 1 minute to generate the file. How can I download the file using XMLHTTPRequest instead? The solution should only work wi ...

javascriptajaxextjsxmlhttprequest

The calculation of Value Added Tax does not involve the use of jQuery

My form setup is as follows: <form method="post" action="" id="form-show"> <table class="table table-bordered table-striped table-hover" id='total' style="width:100%;"> ...

javascriptjqueryajax

Utilizing Jquery Datatables for PHP-based server-side processing with MSSQL integration

I found a helpful guide on Coder Example to implement server-side processing with datatables in PHP, MSSQL, and AJAX. After customizing the code to fit my needs, here is how my index page looks like: <!DOCTYPE html> <html> <title>Da ...

phpjqueryajaxdatatablesserver-side