Laden neuer JSON-Daten in Angular bei einem Klick-Ereignis

Ich habe eine PHP-Datei, die JSON-Daten für mein Angular-Array erzeugt. Abhängig von der GET-Anfrage unterscheiden sich die Daten. Die zwei URLs, die unterschiedliche Daten erzeugen, enthalten die Zeichenfolge data.php?c=1 oder data.php?c=2.Laden neuer JSON-Daten in Angular bei einem Klick-Ereignis

Beim ersten Laden habe ich data.php?c=1 vorinstalliert, aber was ich nicht herausfinden kann ist, wie ich dynamisch neue Daten in das Array laden und es auf der Seite aktualisieren kann. In dem Beispiel möchte ich auf den Link klicken, der etwas auslöst, um die neuen Daten zu holen.

Ich habe wirklich damit zu kämpfen. Ich bin mir nicht einmal sicher, ob meine Methode an erster Stelle richtig ist oder ob ich den Seiteninhalt mit AJAX neu laden soll, nachdem ich das neue Array geholt habe.

<!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>

Quelle

2016-05-05 Daniel Williams

Zunächst einmal müssen Sie ng-Controller-Richtlinie in Ihrer Vorlage bewegen, so dass Sie Ereignis in diesem Controller klicken reagieren könnten. Die zweite - ersetzen "onclick" Javascript-Ereignis mit "ng-Klick" eckige Direktive. Also, Körper Vorlage des sein:

<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>

Danach Ihrem Controller auf diese Weise ändern:

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

Also, wenn Sie auf Ihren Link klicken, wird es doSomething Methode aufrufen, die im Inneren ist der Umfang Ihres Controllers. Und doSomething Methode wird Daten von Ihrem API erhalten.

Quelle

2016-05-05 23:38:47

Versuchen Sie dies, hier ist das Update. Ich weiß, es hat eine Antwort, aber was solls. Mehr wie dein bestehender Code.

<!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>

Quelle

2016-05-05 23:40:52 alphapilgrim

Vielen Dank für Ihre Antwort veröffentlichen, aber ich konnte es überhaupt keine Daten angezeigt bekommen. Ich arbeite jetzt mit der Antwort eines anderen Beantworters. –

@DanielWilliams wurde auf den vorhandenen Code aktualisiert. Hoffe, das hilft irgendwie wie auch immer. Prost! – alphapilgrim

Laden neuer JSON-Daten in Angular bei einem Klick-Ereignis

Antwort

Verwandte Themen