AngularJS - страница калькулятора - множественные свойства, умноженные вместе

Question

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

Тогда эта цена будет иметь другой селектор для раз в месяц.

Таким образом, общая стоимость будет цена * раз в месяц (т/мин).

Если я разместил это на странице, это {{price * tpm}}.

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

Итак, фактический расчет будет: (((цена * tpm) * 12) * лет) *%.

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

Мое приложение довольно сложно, макет, но я поставил небольшую скрипку, чтобы продемонстрировать логику.

http://jsfiddle.net/scott_in_ct/SPN8V/

$scope.$watch(
    function(){ 
     return $scope.price * $scope.item1TPM * $scope.years * $scope.int; 
    }, 
    function(newVal, oldVal) { 
     $scope.total = $scope.price * $scope.item1TPM * 12; 
     $scope.totalOverTime = $scope.price * $scope.item1TPM * $scope.years * $scope.int; 
}); 

Проблема, которую я только что понял, что я имею что если поля группируются с оболочкой, которая использует в нг-если, чтобы показать/скрыть их содержание, результаты не согласуются ,

- Скотт

Answer 1

Редактировать о ng-if:

Будьте осторожны с ng-if. Он полностью удаляет узлы из дерева DOM. Поэтому они вообще не существуют. Часто это то, что вы хотите. Но часто ng-show - это путь. В вашем случае, если вы отслеживали вопрос до ng-if, то ng-show, вероятно, должен исправить ситуацию для вас.

Если вы не хотите возиться с часами и само вычисление не дорого, вы можете использовать привязку функций.

объявить функцию по размаху, как это:

$scope.calculatePrice = function(){ 
return (((price * tpm) * 12) * years) * %;//here your calculation that makes sense in controller context 
}; 

затем связать его в HTML, как этот

<div>{{calcualetPrice()}}</div> 

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