Angular JS assistance with adding values and decimals - html

Question

Im working wiht some home automation tools which displays energy usage using some widgets created but others smarter than I.
I can get this to work, it will display usage in KW however its incorrect.
The same of the watts should be portion of a KW
Can anyone point me in the direction of resolving this so it shows 0.XX please
<div class="widget">
<div class="icon off">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/squidink.svg#thunder-1">
</use>
</svg>
</div>
<div class="name">Power</div>
<div class="valueGroup">
<div class="value">
{{itemValue('LivingRoomNum2')*1 + itemValue('KitchenNum2') | number:2}} kW
</div>
<div class="value">
{{itemValue('LivingRoomNum1')}} W (Living)
</div>
<div class="value">
{{itemValue('KitchenNum1')}} W (Kitchen)
</div>
</div>
</div>

Answer 1

I suspect that from function itemValue() returned value is of type string and this is causing wrong calculation. Make sure you parse the result as number. You can use parseFloat() when returning from itemValue().
Check the sample:
var app = angular.module('test', []);
app.controller('AppController', ['$scope', function($scope) {
}]);
app.run();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="AppController" class="widget">
<div class="value">Wrong: {{'12.5' * 1 + '10' | number:2}} kW</div>
<div class="value">Correct: {{12.5 * 1 + 10 | number:2}} kW</div>
</div>

Answer 2

Add the | number:2 filter within the {{ }} of the 2nd and 3rd values. This filter allows numbers to be shown in decimals. Also make sure the data isn't string.

Answer 3

<div class="widget">
<div class="icon off">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/squidink.svg#thunder-1">
</use>
</svg>
</div>
<div class="name">Power</div>
<div class="valueGroup">
<div class="value">
{{(itemValue('LivingRoomNum2')*1 + itemValue('KitchenNum2')*1)/1000}} kW
</div>
<div class="value">{{itemValue('LivingRoomNum1')}} W (P1)</div>
<div class="value">{{itemValue('KitchenNum1')}} W (P2)</div>
</div>
</div>
This fixed it. My actual number is indeed a string