As a novice in using Angular, I am eager to explore its capabilities, especially in retrieving return values from the controller.
I have been contemplating if it's feasible to make an ajax call and then retrieve the return value to be passed into Angular.
To achieve this, I have created a function that fetches data from my controller using ajax:
function myData() {
$.ajax({
url: '/Home/testGetMSSQL',
type: 'GET',
dataType: 'json',
success: function (data) {
return data
},
error: function (jqXhr, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
My objective is to incorporate the above function in my Angular call like so:
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function ($scope) {
$scope.customers = myData(),
$scope.people = [],
$scope.currentPage = 1,
$scope.numPerPage = 5,
$scope.maxSize = 5;
$scope.numPages = function () {
return Math.ceil($scope.customers.length / $scope.numPerPage);
};
$scope.$watch('currentPage + numPerPage', function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.people = $scope.customers.slice(begin, end);
});
});
Currently, this approach is not functioning but when I hard code a value, it works perfectly:
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function ($scope) {
$scope.customers = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}],
$scope.people = [],
$scope.currentPage = 1,
$scope.numPerPage = 5,
$scope.maxSize = 5;
$scope.numPages = function () {
return Math.ceil($scope.customers.length / $scope.numPerPage);
};
$scope.$watch('currentPage + numPerPage', function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.people = $scope.customers.slice(begin, end);
});
});
I found inspiration from this example: https://codepen.io/jyothinagaraj/pen/ALoYgO
Any suggestions or comments are welcome. Thanks in advance!