2

Пишу приложение подсчета бюджета, как реализовать вывод суммы веденных чисел?

function TodoCtrl($scope){
  var sums = $scope.sums = [];
  $scope.sum = '200';
  $scope.addSu = function(sum){
    sums.push(sum);
  };
  $scope.removeSum = function(index){
    sum.splice(index,1);
  };
}
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
  <script src="todo.js"></script>
</head>
<body>
  <div ng-app>
  
  <div ng-controller="TodoCtrl">

    <h2>Сегодня я потратил: {{sum}} руб.</h2>
    <input type = 'text' ng-model = "sum" size = "40" />
    <button ng-click = "addSu(sum)">Добавить</button>

    <ul>
      <li ng-repeat = "sum in sums track by $index">
        <span ng-bind="$parent.$eval(sum)"></span>
        <span>руб</span>
      </li>
    </ul>
</div>
</div>
</body>
</html>

4
  • а вы этот код взяли где-то или сами написали?
    – Grundy
    18 янв 2016 в 13:23
  • Половину я, половина с сайта angular.ru
    – robert
    18 янв 2016 в 13:34
  • старайтесь не использовать функции для вывода значений типа $parent.$eval(sum) да и вообще использовать eval вне директив обычно не нужно
    – Grundy
    18 янв 2016 в 13:37
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 19 янв 2016 в 2:14

1 ответ 1

1

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

Хочу обратить внимание, что в примере в вопросе используется старая версия angular, и приведенный код не будет работать как есть для более новых версий. В ответе используется angular версии 1.4.7

angular.module('app', [])
  .controller('ctrl', function($scope) {
    var sums = $scope.sums = [];
    $scope.sum = '200';
    $scope.total = 0; // итого
    $scope.addSu = function(sum) {
      $scope.total += +sum; // переводим sum в число и добавляем к total
      sums.push(+sum); // Добавляем в список
    };
    $scope.removeSum = function(index) {
      $scope.total -= sums.splice(index, 1);//удаляем из списка и вычитаем из total
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div ng-app="app">

  <div ng-controller="ctrl">

    <h2>Сегодня я потратил: {{total}} руб.</h2>
    <input type='text' ng-model="sum" size="40" />
    <button ng-click="addSu(sum)">Добавить</button>

    <ul>
      <li ng-repeat="sum in sums track by $index">
        <span ng-bind="sum"></span>
        <span>руб</span>
        <span ng-click="removeSum($index)">Удалить</span>
      </li>
    </ul>
  </div>
</div>

3
  • Спасибо! Все работает. Что за ошибка в консоле? WARNING: Tried to load angular more than once. Uncaught TypeError: window.angular.$$csp is not a function
    – robert
    18 янв 2016 в 13:36
  • @spmpl, это ошибка в вашем коде или в коде сниппета? скорее всего вы скопировали полностью html, при этом захватили строку <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> подключающую ангуляр, но не удалили такую же из тега head
    – Grundy
    18 янв 2016 в 13:39
  • Исправил. Спасибо!
    – robert
    18 янв 2016 в 13:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.