Есть ли какой-нибудь угловой код для вкладок, который изначально не загружает данные при просмотре, а загружает их только при нажатии

Question

Есть ли какой-нибудь угловой код для вкладок, который изначально не загружает данные при просмотре, а загружает их только при нажатии

это то, что он показывает при нажатии на вкладку один раз, когда я нажимаю на нее, загружает последние два файла .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);
});
});

1

angularjs angularjs-directive angularjs-scope json php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я бы предложил, чтобы вы просто вызывали функцию, которая загружает данные 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, чтобы удовлетворить ваши потребности.

0