Переменные AngularJS, основанные на других переменных типа int

0

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

Javascript/угловой ниже

var app = angular.module('expenses', []);
app.controller('mainCtrlr', function($scope) {
    var expenseTotal<----variable I cannot get to work

    var expenseOne;
    var expenseTwo;
    var expenseThree;

    $scope.expenseOne = 270;
    $scope.expenseTwo = 265;
    $scope.expenseThree= 65;
});

заполняет данные этой таблицы

<div ng-app="expenses" ng-controller="mainCtrlr">
<table>
    <tr>
    <td> Expense </td><td><input type= int ng-model="expenseOne"></td>
    </tr>
    <tr>
    <td>Other Expense </td><td><input type=int ng-model= "expenseTwo"></td>
    </tr>
    <tr>
    <td>Third Expense </td><td><input type=int ng-model= "expenseThree"></td>
    </tr>
    </table>
Total {{expenseTotal}}
</div>

Я не могу получить {{costTotal}}, чтобы показать что-то другое, кроме NaN. Я бы хотел, чтобы это была полезная переменная, которая будет учитываться в других уравнениях, но основываться на сумме расходов. Кто-нибудь знает, что еще нужно в моем файле javascript, чтобы сделать эту работу?

спасибо заранее, и я сожалею, если его спросили раньше, но я не мог найти его нигде.

  • 0
    Вы, кажется, ничего не делаете с переменной в коде?
  • 0
    Я, но в других частях кода .. я просто изолировал, где проблема была, чтобы избежать беспорядка
Теги:
scope
data-modeling

2 ответа

0
Лучший ответ
angular.module('expenses', [])
    .controller('mainCtrlr', function($scope) {
        $scope.expenseOne = 270;
        $scope.expenseTwo = 265;
        $scope.expenseThree = 65;
        $scope.expenseTotal = $scope.expenseOne + $scope.expenseTwo + $scope.expenseThree;
    });

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

Поделиться
  • 0
    Это здорово, спасибо. Есть ли простой способ, ветвление этого решения, чтобы поддерживать {{costTotal}} живое обновление, когда я изменяю то, что находится на входе? Если я включаю {{costOne}} в HTML, он обновляется в реальном времени, когда я изменяю то, что в форме. Если это невозможно, предложите ли вы использовать таймер для обновления каждые несколько секунд или около того? или есть лучший способ сделать его, казалось бы, «динамически обновлять»
  • 0
    Он будет обновляться автоматически при условии, что расчет, используемый для определения срока службы переменной в цикле углового дайджеста. Если нет, то существует метод $ scope. $ Apply (), если вы, скажем, используете функцию вне цикла дайджеста, чтобы установить значение для этого свойства. Вот довольно хорошая статья об использовании $ apply: benlesh.com/2013/08/angularjs-watch-digest-and-apply-oh-my.html
Показать ещё 2 комментария
0

{{expenseTotal}} возвращается к $scope.expenseTotal, поэтому вы можете либо установить его в своем контроллере:

app.controller('mainCtrl', function($scope) {
    $scope.expenseTotal = 4; // Do your calculations here
});

Или вы можете ссылаться на контроллер в своем шаблоне:

<div ng-controller="mainCtrl as ctrl">
    Total {{ctrl.expenseTotal}}
</div>

Если вы хотите добавить три переменных, вы можете просто написать:

<div ng-controller="mainCtrl">
    ...
    Total {{expenseOne + expenseTwo + expenseThree}}
</div>

В этом случае нет необходимости в общей переменной.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню