在单击事件上将新的 JSON 数据加载到 Angular 中答案

【问题标题】：Loading new JSON data into Angular on a click event在单击事件上将新的 JSON 数据加载到 Angular 中
【发布时间】：2016-05-05 23:13:32
【问题描述】：

我有一个 PHP 文件，它为我的 Angular 数组生成 JSON 数据。根据 GET 请求，数据会有所不同。产生不同数据的两个 URL 包括字符串data.php?c=1 或data.php?c=2。

在初始加载时，我预加载了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>

【问题讨论】：

标签： javascript php jquery angularjs json

【解决方案1】：

首先你需要在你的模板中移动 ng-controller 的指令，这样你就可以对这个控制器内的点击事件做出反应。第二个 - 用 'ng-click' 角度指令替换 'onclick' javascript 事件。因此，您的模板正文将是：

<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 获取数据。

【讨论】：

【解决方案2】：

试试这个，这是更新。我知道它有一个答案，但到底是什么。更像您现有的代码。

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

【讨论】：

感谢您发布您的答案，但我无法让它显示任何数据。我现在正在使用另一个回答者的答案。
@DanielWilliams 已更新为现有代码。希望这有助于一些无论如何。干杯！