我有大量的数据,
所以我想使用每个标签的数据块的标签.
所以我想使用每个标签的数据块的标签.
我希望标签内容在标签标题的点击上加载,然后在以后再次选择时不需要重新加载.
我认为这个例子进入了我想要的方向:
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使选项卡加载.这是我制定的一个小示范.
原文链接:https://www.f2er.com/ajax/160028.html选项卡具有选择时触发的选择属性.所以我使用以下选项卡:
<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) }
将缓存移动到服务中,以便如果用户切换视图并返回,则数据仍将在服务缓存中