ajax – 带有角度的选项卡：仅使用$http加载选项卡内容

发布时间：2020-12-16 03:12:34 所属栏目：百科来源：网络整理

导读：我有大量的数据, 所以我想使用每个标签的数据块的标签. 我希望标签内容在标签标题的点击上加载,然后在以后再次选择时不需要重新加载. 我认为这个例子进入了我想要的方向： angular-ui tabs loading template in tab-content 但这似乎加载了一个静态模板： ta

我有大量的数据,
所以我想使用每个标签的数据块的标签.

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

我认为这个例子进入了我想要的方向：
angular-ui tabs loading template in tab-content

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

<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路由加载的页面,所以我不能做嵌套路由.

编辑：每个标签的内容是完全不同的,所以我最好为每个标签或类似的东西提供一个功能和一个模板…

我想角u是一个很好的办法吗？

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

选项卡具有选择时触发的选择属性.所以我使用以下选项卡：

<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",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)

  }

将缓存移动到服务中,以便如果用户切换视图并返回,则数据仍将在服务缓存中

DEMO

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!