JSFiddle - React, Tailwind, and code Playground

by Mathias Bonnet

HTML

<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <select ng-model="selected_unit" ng-options="selected_unit for selected_unit in units"></select>
        <div ng-repeat="cost in converted_costs">
            <p>{{cost.title}}: {{cost.value | currency}}</p>
        </div>
    </div>
</div>

JavaScript

var AppModule = angular.module('myApp', []);

AppModule.factory('AppService', function(){
    return{
        convert: function convert(unit, value){
            if (unit === '/day') {
                cost = value*12/365;
            }
            else if (unit === '/month') {
                cost = value;
            }
            else if (unit === '/year') {
                cost = value*365;
            }
            return cost;
        },
        convert_all: function convert_all(selected_unit, costs){
            converted_costs = angular.copy(costs);
            angular.forEach(costs,function(cost, key){
                converted_costs[key].value = convert(selected_unit, cost.value);
            });
            return converted_costs;
        }
    }    
});

AppModule.controller('AppCtrl', function($scope, AppService){
    $scope.units = ['/day', '/month', '/year'];
	$scope.selected_unit = $scope.units[1];
    $scope.costs = [{title:'Rent', value:800},{title:'Food', value:400}];
    $scope.converted_costs = AppService.convert_all($scope.selected_unit, $scope.costs);     
});