我有一个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>
首先，您需要在模板中移动ng控制器的指令，这样您就可以对该控制器中的点击事件做出反应。第二个-将"onclick"javascript事件替换为"ng-click"angular指令。因此，您的模板的主体将是：
<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中获取数据。
试试这个，这里是更新。我知道它有答案，但见鬼。更像您现有的代码。
<!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>