Following the recommended practices, I am working on encapsulating my global functions into reusable factory services. In the provided code snippet, my objective is to execute a function that takes the string value of "Qprogress" from my JSON data, performs some mathematical operations on it, and then appends the resulting output to an element with the class "percent". How can I achieve this task effectively?
HTML:
<table class="table table-striped table-condensed" ng-controller = "clientStatus">
<thead>
<tr>
<th>Client</th>
<th>Status</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in clients">
<td><a href="#/details/{{clients.indexOf(item)}}" title="Link to {{item.FirstName}} {{item.LastName}}" class="oly-open">{{item.FirstName}} {{item.LastName}}</a></td>
<td ng-hide="item.Progress == 'In Progress'" ng-class="{ 'status-success': item.Progress == 'Questionnaire Completed', 'status-error': item.Progress == 'Unsent'}">{{item.Progress}}</td>
<td ng-if="item.Progress == 'In Progress'" class="status-info percent" ng-init="progressCalc(item)"></td>
<td width="10%"><a href="#/reports/" title{{$index + 1}}="Reports" ng-show="{{item.Progress == 'Questionnaire Completed'}}"><span class="stat-icon-report"></span></a> <a href="#/sends/{{$index + 1}}" title="Alert" ng-show="{{item.Progress == 'Unsent'}}"><span class="stat-icon-bullhorn"></span></a> <a href="#/progress/{{$index + 1}}" title="In Progress" ng-show="{{item.Progress == 'In Progress'}}"><span class="stat-icon-phone"></span></a></td>
</tr>
</tbody>
</table>
AngularJS:
var myApp = angular.module('myApp', []);
myApp.factory('progressCalc', function() {
angular.forEach(function(item) {
var m = 0.26664;
var s = 0.26664;
var i = 0.694375;
var t = item.Qprogress;
t = t.replace(/m/g, '');
t = t.replace(/s/g, '');
t = t.replace(/i/g, '');
var ta = t.split("/");
var tTotal = (ta[0] * m) + (ta[1] * s) + (ta[2] * i);
Math.round(tTotal);
(tTotal + '%').append('.percent');
});
});
myApp.controller('clientStatus', ['$scope', '$http', function($scope, $http) {
$http.get('assets/js/lib/angular/clientList.json').success(function(data) {
$scope.clients = data;
});
}]);
Snippet of JSON:
{
"FirstName": "Jane",
"LastName": "Greenberg",
"Company": "Nike",
"CompanyId": "2345672",
"ClientId": "EFTGE6",
"Title": "CIO",
"Phone": "555-555-5555",
"ClientSystemStatus": "Active",
"CreationDate": "06/12/2015, 9:12:27 am",
"Progress": "In Progress",
"Qprogress": "m125/s108/i0",
"Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670d0015020209050215002709...">
}
I initially attempted to enclose my code within a function and use ng-init on the target element for appending, but unfortunately, that approach did not yield the desired results.