Есть ли какой-нибудь угловой код для вкладок, который изначально не загружает данные при просмотре, а загружает их только при нажатии
это то, что он показывает при нажатии на вкладку один раз, когда я нажимаю на нее, загружает последние два файла .15 и .17 снова полностьюэто отображается в консоли, когда я проверяю, даже если я не нажимал на вкладку. И отображает эти данные в браузере, когда я нажимаю на вкладку. Это не должно отображаться, когда консоль нажата при просмотре страницы. Данные загружаются только при нажатии на вкладку.
Object {type: «FeatureCollection», метаданные: Object, features: Array [11], bbox: Array [6]} bbox: Array [6] features: Array [11] метаданные: Тип объекта: «FeatureCollection»прото: Объект
here is my code..
<body ng-controller="CountryCtrl">
<div ng-app ng-init="tab=1">
<div class="cb" ng-click="tab = 1">tab 1</div>
<div class="cb" ng-click="tab = 2">tab 2</div><div ng-show="tab == 1">
<p>hellloollllllllllllo</p>
</div><div ng-show="tab == 2">
<h2>Angular.js JSON Fetching Example</h2><table border=1>
<tr>
<th>type</th>
<th>properties_mag</th>
<th>properties_place</th>
<th>properties_time</th>
<th>properties_upated</th>
<th>properties_tz</th>
</tr>
<tr ng-repeat="type in country ">
<td>{{type.type}}</td>
<td>{{type.properties.mag}} </td>
<td> {{type.properties.place}} </td>
<td> {{type.properties.time}} </td>
<td> {{type.properties.updated}} </td>
<td> {{type.properties.tz}} </td>
<tr ng-repeat="cor in features.geometry.coordinates ">
<td> {{cor}} </td>
</tr>
</table>
</div>
this is controller function.....
var countryApp = angular.module('countryApp',[]);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('http:/4.5_day.geojson').success(function(data) {
console.log(data);
$scope.country = data.features;
$scope.coor=data.features.geometry.coordinates;
console.log($scope.country);
});
});
Решение
Я бы предложил, чтобы вы просто вызывали функцию, которая загружает данные JSON, при нажатии на вторую вкладку с помощью ng-click. Таким образом, вы не загрузите его, пока не нажмете вкладку.
Вы можете изменить:
<div class="cb" ng-click="tab = 2">tab 2</div>
Для того, чтобы:
<div class="cb" ng-click="switchTabAndLoadData()">tab 2</div>
И определил функцию в вашем контроллере для обновления переменной табуляции и загрузки JSON.
Вы вызываете службу $ http прямо в вашем контроллере, поэтому данные загружаются заранее. Попробуй это:
var countryApp = angular.module('countryApp',[]);
countryApp.controller('CountryCtrl', function ($scope, $http){
var loadData = function(){
$http.get('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson').success(function(data) {
console.log(data);
$scope.country = data.features;
$scope.coor=data.features.geometry.coordinates;
console.log($scope.country);
});
}
$scope.switchTabAndLoadData = function(){
$scope.tab=2;
if(angular.isUndefined($scope.country) || angular.isUndefined($scope.coor)){
loadData();
}
}
});
Не забудьте также применить изменения HTML, которые я ранее предложил, и это должно быть хорошо.
Ваша проблема лежит в другом месте, если бы вы проверили консоль, вы бы увидели, что angular дает ошибку при назначении переменных для $scope.coor так как вы пытаетесь назначить свойства объекта в массиве объекта.
Проверьте эту ручку для решения: http://codepen.io/anon/pen/BjXGGJ
Затем вы можете настроить HTML, чтобы удовлетворить ваши потребности.
Другие решения
Других решений пока нет …