我的应用程序中有两个选项卡，我正在获取API响应中的所有数据。所以在第一时间，我的所有数据都被加载了。
我的两个标签是
-
标签1
-
选项卡2
所以默认情况下它总是在选项卡1中。所以我只想加载选项卡1的数据，而不想加载选项卡2的数据。点击选项卡2后，我只需要加载选项卡2的数据，而那一次我不想加载选项卡1的数据。
-
我有一个名为"；isfirst"；。如果"；isfirst"；是"；1〃；，然后我只需要加载第一个选项卡内容。与如果"；isfirst"；是"；0"；，然后我只需要加载第二个选项卡内容。
-
这是为了提高性能。如果我点击第二个选项卡，第一个选项卡上的现有数据将不会再次加载。如果我再次点击第一个选项卡，我需要销毁第二个选项卡的数据。
请查看plunkr，
Plunkr
[
{
"fruit":[
{"Apple":"Apple content goes here", "isfirst":"1"},
{"Pear":"Pear content goes here", "isfirst":"0"}
]
}
]angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope,$http, $timeout) {
$scope.tabs = [
{ title:"Apple", content:[] , isLoaded:false , active:true},
{ title:"Pear", content:[] , isLoaded:false }
];
$scope.getContent=function(index){
/* see if we have data already */
if($scope.tabs.isLoaded){
return
}
/* or make request for data delayed to show Loading... */
$timeout(function(){
var jsonFile='data1.json'
$http.get(jsonFile).then(function(res){
$scope.tabs.content=res.data[0].fruit;
console.log(res.data[0].fruit);
$scope.tabs.isLoaded=true;
});
},100)
}
};<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="getContent($index)" active="tab.active" disabled="tab.disabled">
<div ng-hide="!tabs.isLoaded">
<h1>{{tab.title}}</h1>
<div ng-repeat="item in tabs.content">
<p>{{item[tab.title]}}</p>
</div>
</div>
<div ng-hide="tabs.isLoaded"><h3>Loading...</h3></div>
</tab>
</tabset>
<hr />
</div>
</body>
</html>这里介绍如何使用angularjs限制加载数据。根据选项卡单击我想动态加载数据。
但是您只有一个json文件。如果您想单独加载选项卡数据，那么您需要至少有2个不同的json文件(相应地，对于两个选项卡(。但现在，您已经为两个选项卡加载了相同的json文件。例如，如果您有两个json文件：
data_1.json
{
"title": "Pear",
"desc": "Pear content goes here"
}data_2.json
{
"title": "Apple",
"desc": "Apple content goes here"
}那么你的代码将看起来像：
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="getContent($index)" active="tab.active" disabled="tab.disabled">
<div ng-hide="!tab.isLoaded">
<h1>{{tab.content.title}}</h1>
<p>{{tab.content.desc}}</p>
</div>
<div ng-hide="tab.isLoaded"><h3>Loading...</h3></div>
</tab>
</tabset>
<hr />
</div>
</body>
</html>example.js
angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope,$http, $timeout) {
$scope.tabs = [
{ title:"Apple", content:[] , isLoaded:false , active:true},
{ title:"Pear", content:[] , isLoaded:false }
];
$scope.getContent=function(index){
/* see if we have data already */
if($scope.tabs[index].isLoaded){
return
}
/* or make request for data delayed to show Loading... */
$timeout(function(){
var jsonFile='data_'+ index +'.json'
$http.get(jsonFile).then(function(res){
$scope.tabs[index].content = res.data;
$scope.tabs[index].isLoaded=true;
});
},100)
}
};