[英]Loading new JSON data into Angular on a click event
我有一个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-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获取数据。
试试这个，这是更新。 我知道它有一个答案，但到底是什么。 更像您现有的代码。
<!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>
单击按钮时加载新的json url，并更新Angular中的View
[英]Loading new json url on button click and updating View in Angular
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.