Угловая помощь JS с добавлением значений и десятичных дробей

Question

Я работаю с некоторыми инструментами домашней автоматизации, которые отображают энергопотребление с использованием некоторых созданных виджетов, но другие умнее, чем я.

Я могу заставить это работать, оно будет отображать использование в KW, однако это неверно.

То же самое ватт должно быть частью KW

Может ли кто-нибудь указать мне в направлении решения этой проблемы, чтобы он показывал 0.XX, пожалуйста

<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

Добавьте фильтр | number:2 в пределах {{ }} 2-го и 3-го значений. Этот фильтр позволяет отображать числа в десятичных числах. Также убедитесь, что данные не являются строками.

Answer 2

<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>

Это исправлено. Мое действительное число действительно является строкой

Answer 3

Я подозреваю, что из функции itemValue() возвращаемое значение имеет тип string , и это вызывает неправильный расчет. Убедитесь, что вы анализируете результат как число. Вы можете использовать parseFloat() при возврате из itemValue().

Проверьте образец:

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>