I have this code:
<pre>totalItems: {{vm.pagination.totalItems}}</pre>
<pre>items-per-page: {{vm.pagination.itemsPerPage}}</pre>
<pre>Total: Math.ceil({{vm.pagination.totalItems / vm.pagination.itemsPerPage}})</pre>
Output:
I'm using Math.ceil() so the answer should be 11 but I'm not getting the correct answer as below:
How can I calculate angular value in braces? Please help and thanks in advance.
The best way is to create a scoped function:
<pre>Total: {{calculateTotal(vm.pagination.totalItems, vm.pagination.itemsPerPage)}}</pre>
Then add the function to the scope:
$scope.calculateTotal = function(totalItems, itemsPerPage) {
return Math.ceil(totalItems/itemsPerPage);
};
angular.module('myapp', [])
.controller('foo', function($scope) {
var vm = this;
vm.w = {
pagination: {
totalItems: 258,
itemsPerPage: 25
}
}
init();
return vm.w;
function init() {
vm.w.pagination.calculation = Math.ceil(vm.w.pagination.totalItems / vm.w.pagination.itemsPerPage)
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myapp">
<div ng-controller="foo as vm">
<pre>totalItems: {{vm.pagination.totalItems}}</pre>
<pre>items-per-page: {{vm.pagination.itemsPerPage}}</pre>
<pre>Total: {{vm.pagination.calculation}}</pre>
</body>If you need to use Math in the template, you will need to expose it. So in your controller you would set
vm.Math = Math;
and you would then use it in the template like so:
<pre>Total: {{ vm.Math.ceil(vm.pagination.totalItems / vm.pagination.itemsPerPage }})</pre>
However, rather than doing the calculation in the template you would be better off exposing a function that calculates the value in your controller:
vm.getTotalPageCount = function() {
return Math.ceil(vm.pagination.totalItems / vm.pagination.itemsPerPage);
};
And use it in your template:
<pre>Total: {{ vm.getTotalPageCount() }})</pre>
