角度中是否有任何代码用于选项卡，它最初不会在浏览中加载数据，而是仅在我们单击它时才加载它 - Is there any code in angular for tabs which doesn't load data in browse initially but loads it only when we click it

Is there any code in angular for tabs which doesn't load data in browse initially but loads it only when we click it

这是它在单击选项卡时显示的内容，第二次单击它再次加载最后两个文件 .15 和 .17这在我检查时显示在控制台中，即使我没有单击选项卡。并在我单击选项卡时在浏览器中显示此数据。在检查页面时单击控制台时，不应显示此内容。数据仅在我单击选项卡时加载。

对象 {type： "FeatureCollection"，元数据： Object， features：Array[11]， bbox： Array[

6]}bbox： Array[6]features： Array[11]metadata： Objecttype： "FeatureCollection"proto： Object

 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);
    });
  });

我建议您在使用ng-click单击第二个选项卡时简单地调用加载JSON数据的函数。这样，除非单击选项卡，否则您将无法加载它。

您可以更改：

<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更改，它应该没问题。

您的问题出在其他地方，如果您检查控制台，您会发现角度在为$scope.coor分配变量时出错，因为您正在尝试在对象数组中分配对象的属性。

检查此笔以获取解决方案：http://codepen.io/anon/pen/BjXGGJ

然后，您可以根据需要调整 HTML。