AngularJS ng-repeat Math Pow
AngularJS noob here. I am trying to generate a table dynamically when the user enters a number into an input field and the table returns 10 rows of exponential values in sequence. For example:
<div ng-controller='myController'>
<input type="text" ng-model="number">
<table>
<tr><th>Index</th><th>Number</th>
<tr ng-repeat='item in ebooks'><td>{{$index}}</td><td>{{ item.amt}}</td><td> {{ Math.pow(number, $index+1 }}</td>
<td>{{ Math.pow(number,$index+1) * item.amt }}</td></tr>
</table>
</div>
In my controller, I have data e-books.
app.controller('myController',function($scope) {
$scope.ebooks = [{amt:0.25},{amt:0.10},{amt:0.05},{item:0.02}];
});
I am trying to create a table where the cell number displays the corresponding exponential number and another column that multiplies the exponential number by the element value. I think I should be using Service or Factory, but I don't know which is the correct approach. The result I want is:
enter number = 5
Item Price Number Total
1 0.25 5 1.25
2 0.1 25 2.5
3 0.05 125 3.25
in my services i tried to do this:
app.service('MathService', function(){
this.Expo = function (a) {return Math(a, $index +1)};
});
But it doesn't work.
I have read several other tutorials on displaying arrays in Factory, but I cannot understand them. I think I need to create it in a factory, adding the Expo key to the ebooks dataset, so it looks like {item: value, expo: value}.
Very confusing and flawed. Help!
source to share
Just use $filter
, namely:
.filter('mathPow', function(){
return function(base, exponent){
return Math.pow(base, exponent);
}
})
And you can use it like this:
<div ng-controller='myController'>
<input type="text" ng-model="number">
<table>
<tr><th>Index</th><th>Number</th></tr>
<tr ng-repeat='item in ebooks'>
<td>{{$index}}</td>
<td>{{ item.amt}}</td>
<td>{{ number|mathPow:$index+1 }}</td>
<td>{{ (number|mathPow:($index+1))*item.amt}}</td>
</tr>
</table>
</div>
Example
source to share