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

问题描述

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

我希望在点击标签标题时延迟加载标签内容，然后在以后再次选择时不需要再次重新加载.

我认为这个例子符合我想要的方向:angular-ui tabs 在 tab-content 中加载模板

但这似乎加载了一个静态模板:

<pane active="pane.active"标题="{{pane.title}}"ng-repeat="窗格中的窗格"><div ng-include="pane.content"></div></窗格></tabs>

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

每个标签的内容都大不相同，所以理想情况下我会为每个标签或类似的东西提供一个功能和模板......

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

解决方案

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

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

<div ng-hide="!tabs[0].isLoaded"><h1>内容1</h1><div ng-repeat="tabs[0].content 中的项目">{{物品}}

<div ng-hide="tabs[0].isLoaded"><h3>正在加载...</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){/* 看看我们是否已经有数据 */if($scope.tabs[tabIndex].isLoaded){返回}/* 或请求数据，延迟显示 Loading... vs cache */$超时(功能(){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 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?

解决方案

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

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