クリックイベントで新しいJSONデータをAngularに読み込む

Angular配列のJSONデータを生成するPHPファイルがあります。 GET要求に応じて、データが異なります。異なるデータを生成する2つのURLには、文字列data.php?c=1またはdata.php?c=2が含まれます。クリックイベントで新しいJSONデータをAngularに読み込む

初期ロード時にはdata.php?c=1がプリロードされていますが、私が把握できないのは、新しいデータをアレイに動的にロードしてページ上でリフレッシュできる方法です。この例では、新しいデータを取得するためのトリガーとなるリンクをクリックします。

私は本当にこれで苦労しています。私は自分のメソッドが最初の場所で正しいかどうか、あるいは新しい配列を取得した後にAJAXでページの内容をリロードする必要があるかどうかはわかりません。

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

<script> 

    (function() { 

     var app = angular.module('myApp', []); 

     app.controller('FilesController', function ($scope, $http){ 
      $scope.files = []; 
      $http.get('http://monstacdn.com/v2/data.php?c=1').success(function(data) { 
       $scope.files = data; 
      }); 
     }); 
    })(); 

</script> 

</head> 

<body> 

<table ng-controller="FilesController"> 
    <tr ng-repeat="file in files"> 
     <td>{{ file.name }}</td> 
     <td>{{ file.size }}</td>   
    </tr> 
</table> 

<p><a href="#" onclick="doSomething('http://monstacdn.com/v2/data.php?c=2')">Change Data</a> 

</body> 
</html>

出典

2016-05-05 Daniel Williams

まず、ng-controllerの指示文をテンプレート内で移動する必要があります。このコントローラー内でクリックイベントに反応することができます。 2番目の 'onclick' javascriptイベントを 'ng-click' angleディレクティブで置き換えます。だから、あなたのテンプレートの体は次のようになります。その後

<body ng-controller="FilesController"> 

<table> 
    <tr ng-repeat="file in files"> 
     <td>{{ file.name }}</td> 
     <td>{{ file.size }}</td>   
    </tr> 
</table> 

<p><a href="#" ng-click="doSomething('http://monstacdn.com/v2/data.php?c=2')">Change Data</a> 

</body>

、このようにあなたのコントローラーを変更します。

app.controller('FilesController', function ($scope, $http){ 
      $scope.files = []; 

      $scope.doSomething = function(requestString){ 
       $http.get(requestString).success(function(data) { 
        $scope.files = data; 
       }); 
      } 

      $scope.doSomething('http://monstacdn.com/v2/data.php?c=1'); 
     });

だから、あなたはあなたのリンクをクリックしますと、それは内部にあるdoSomethingのメソッドを呼び出しますあなたのコントローラの範囲。そしてdoSomethingメソッドはあなたのAPIからデータを取得します。

出典

2016-05-05 23:38:47

これを試してください。ここに更新があります。私はそれが答えを持っているが知っていることを知っている。既存のコードにもっと似ています。

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script> 
    (function() { 

     var app = angular.module('myApp', []); 

     app.controller('FilesController', function($scope, $http) { 
     $scope.files = []; 
     $http.get('http://monstacdn.com/v2/data.php?c=1').success(function(data) { 
      $scope.files = data; 
     }); 

     $scope.getData = function() { 
      return $http 
      .get('http://monstacdn.com/v2/data.php?c=2') 
      .then(function(response) { 
       $scope.files = response.data; 
       return $scope.files; 
      }, function(reason) { 
       console.log(response.data); 

      }); 
     }; 
     }); 
    })(); 
    </script> 
</head> 

<body> 
    <table ng-controller="FilesController"> 
    <tr ng-repeat="file in files"> 
     <td>{{ file.name }}</td> 
     <td>{{ file.size }}</td> 
    </tr> 
    </table> 
    <p><a href="#" ng-click="getData()">Change Data</a> 
</body> 

</html>

出典

2016-05-05 23:40:52 alphapilgrim

あなたの答えを投稿してくれてありがとう私はそれがすべてですべてのデータを表示するために得ることができませんでした。私は別の回答者の答えで今働いている。 –

@DanielWilliamsが既存のコードに更新されました。とにかくこれはいくつかの助けを願っています。乾杯！ – alphapilgrim

クリックイベントで新しいJSONデータをAngularに読み込む

答えて

関連する問題