Apex Class:
global class AccountDisplayController {
public class AccountDetails {
public List<AccountWrapper> lstAccount;
}
public class AccountWrapper {
public String name;
public String type;
public String accountSource;
}
@RemoteAction
public static AccountDetails getAccountTableData() {
AccountDetails objAccountDetails = new AccountDetails();
List<AccountWrapper> lstAccount = new List<AccountWrapper>();
for(Account objAccount :[select id,name,type,accountSource from Account limit 3]) {
AccountWrapper objAccountWrapper = new AccountWrapper();
objAccountWrapper.name = objAccount.name;
objAccountWrapper.type = objAccount.type;
objAccountWrapper.accountSource = objAccount.accountSource;
lstAccount.add(objAccountWrapper);
system.debug('sssssss'+objAccount.id);
}
objAccountDetails.lstAccount = lstAccount;
return objAccountDetails ;
}
}
Visualforce Page:
<apex:page controller="AccountDisplayController">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
function getData($q) {
var getAccountDetails = function() {
var deferred = $q.defer();
AccountDisplayController.getAccountTableData(function(result, event) {
if (event.status) {
deferred.resolve(result);
} else {
deferred.reject(
'Error Processing the Request : ' +
event.message);
}
}, {
escape: false
});
return deferred.promise;
}
return {
getAccountDetails : getAccountDetails
};
}
app.factory('getData',getData);
app.controller('loadAccountData',function($scope,getData) {
$scope.loadAccountTableData = function () {
var promise = getData.getAccountDetails();
promise.then(function(obj) {
$scope.accountData = obj;
}, function(reason) {
alert('Failed: ' + reason);
}, function(update) {
alert('Got notification: ' + update);
});
}
$scope.loadAccountTableData();
});
</script>
<body ng-app="myApp" ng-controller="loadAccountData">
<div>
<table border="1" cellpadding ="0" cellspacing ="0">
<thead>
<tr class="header-tr grey-header-tr">
<th>Account Name</th>
<th>Account Type </th>
<th>Account Source </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in accountData.lstAccount track by $index">
<td>{{a.name}}</td>
<td>{{a.type}}</td>
<td>{{a.accountSource}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</apex:page>
Output:
Note: If your salesforce org has namespace enabled,use namespace as well while calling controller method.
Like this
//Assuming ABC is the namespace
ABC.AccountDisplayController.getAccountTableData(function(result, event) {
if (event.status) {
deferred.resolve(result);
} else {
deferred.reject(
'Error Processing the Request : ' +
event.message);
}
}, {
escape: false
});
return deferred.promise;
