[AngularJS]是否有任何代码中的角的选项卡,并不在浏览最初加载数据,但只有当我们单击它时将其加载

标签: json PHP AngularJS
发布时间: 2017/4/16 20:38:43
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

这是它在单击选项卡上的显示一次第二次单击它加载最后两个文件.15 和.17 再经过这显示在控制台中,当我检查即使我已经不在选项卡上单击。在浏览器中显示此数据,当我单击选项卡。这不应该显示当控制台单击时运动页。加载的数据只是只有当我单击选项卡。

对象 {类型:"FeatureCollection",元数据︰ 对象,特点︰ 数组 [11],bbox︰ 阵列 [6]} bbox︰ 阵列 [6] 功能︰ 阵列 [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:

我会建议你只需调用一个函数,当单击第二个选项卡使用加载 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 更改我以前建议,应该没事。

你的烦恼在于其他地方,你检查控制台你就会看到,角给出错误变量为您分配 $scope.coor 因为您试图分配的对象的数组中的对象的属性。

检查这支钢笔解决方案︰ http://codepen.io/anon/pen/BjXGGJ

然后,您可以调整 HTML 做您的需求。

官方微信
官方QQ群
31647020