tabs with angular: loading tab content on click only with $http

Question

I have big forms with lots of data, so I'd like tabs with chunks of data for each tab.

I'd like tab content to be lazy loaded on click of the tab title, and it then doesn't need to be reloaded again when selected again later.

I think this example goes into the direction of what I want: angular-ui tabs loading template in tab-content

but this seems to load a static template:

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

How can I load the pane's content dynamically with $http.get()? Note: this is already a page loaded via ng-view routing, so I can't do nested routing.

EDIT: The content is quite different for every tab, so ideally I'd provide a function and a template for every tab or something like that...

I guess angular-ui is a good way to go about this?

charlietfl · Accepted Answer · 2013-11-05 04:51:45Z

18

Was curious myself how to make tabs load via ajax. Here's a little demo I worked out.

Tabs have a select attribute that triggers when selected. So I used following 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){

    /* see if we have data already */
    if($scope.tabs[tabIndex].isLoaded){
      return
    }
    /* or make request for data , delayed to show Loading... vs 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)

  }

Would move the cache to a service so if user switches views, and returns, data will still be in service cache

DEMO

edited Nov 5, 2013 at 4:51

answered Nov 5, 2013 at 4:37

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

unsafe_where_true Over a year ago

I ended up doing something like this as well! Using select, but using ng-include directives for templates. Yours though is more sophisticated including the caching thing, so this one gets accepted :) thanks

charlietfl Over a year ago

I only simplifed the content part. Using inclde certianly makes markup cleaner. Answer was more about how to make the ajax work

user41871 · Accepted Answer · 2015-06-12 16:28:14Z

7

Another approach is to use 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>

Then the controller has 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";
}

answered Jun 12, 2015 at 16:28

user41871

2 Comments

TroodoN-Mike Over a year ago

This is good answer but i think ng-include should be inside <tab> tag

user41871 Over a year ago

Not able to look into this carefully at the moment, but I believe that putting it in the tab would be more typical where you eager load the tab content (so you logically bind the content to the tab in the way you describe), whereas here I am just using the tabs as a way to choose what shows up in a shared area.

Collectives™ on Stack Overflow

tabs with angular: loading tab content on click only with $http

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related