My current project involves a specific functionality: Using AngularJS, I want to trigger an ajax call to retrieve JSON data from the server when a button is clicked.
Without the button interaction, the code below works perfectly:
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="customersController">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
function customersController($scope,$http) {
$http.get("http://www.w3schools.com//website/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>
</body>
</html>However, as soon as I implement the button click feature, the data fails to display upon clicking the button.
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="customersController">
<button ng-click="getData()">Get Data</button>
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
function customersController($scope, $http) {
$scope.getData()= $http.get("http://www.w3schools.com//website/Customers_JSON.php")
.success(function (response) { $scope.names = response; });
}
</script>
</body>
</html>I would greatly appreciate any assistance with this issue!