带角度的选项卡:仅使用 $http 在单击时加载选项卡内容 [英] tabs with angular: loading tab content on click only with $http

问题描述

我有包含大量数据的大型表格，所以我想要每个标签都有数据块的标签.

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.

我认为这个例子朝着我想要的方向发展:标签内容中的angular-ui标签加载模板

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>

如何使用 $http.get() 动态加载窗格的内容?注意:这已经是通过 ng-view 路由加载的页面，所以不能做嵌套路由.

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.

每个选项卡的内容都完全不同，所以理想情况下，我会为每个选项卡或类似的东西提供一个功能和一个模板...

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...

我猜 angular-ui 是解决这个问题的好方法?

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

推荐答案

很好奇自己如何通过 ajax 加载选项卡.这是我制作的一个小演示.

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

选项卡有一个 select 属性，该属性在被选中时触发.所以我使用以下标签:

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>

控制器:

 $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

演示

这篇关于带角度的选项卡:仅使用 $http 在单击时加载选项卡内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！