Question

我有一个PHP文件，可以为我的Angular数组生成JSON数据。根据GET请求，数据不同。生成不同数据的两个网址包括字符串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>

Answer 1

首先，您需要在模板中移动ng-controller的指令，这样您就可以对此控制器内的click事件做出反应。第二个 - 用'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获取数据。

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

在点击事件

2 个答案: