Как суммировать значение в тегах «option» при помощи angular?

Question

[s_pyanov]

Всем доброго времени суток.
Плохо разбираюсь в angular, а javascript подавно, но есть задача и ее нужно решать:
Есть поле мультивыбора, в нем есть наименования товаров с ценами. Мне нужно при выборе значений товаров подсчитать их сумму.

Поле мультиселекта выглядит так:

<select class="chzn-select " multiple="multiple">
  <option ng-repeat="st in catalogs.state">{{ st.name  }}{{ st.price  }}</option>
</select>

Мне соответственно необходимо суммировать все значения которые будут выбраны в {{ st.price }}
Как мне это реализовать?
Заранее спасибо за помощь!

Answer 1

[Александр Пашкевич]

Я бы сделал так) В select добавил ng-model, в которой будет массив из всех выбранных элементов. Далее в option добавил value="{{st.price}}, чтобы в модель селекта шли только цены. И в select добавил ng-change, чтобы при изменении выборки элементов выполнялась некая функция sumF(). Получится примерно так:

<select class="chzn-select " multiple="multiple" ng-model="sum" ng-change="sumF(sum)">
  <option ng-repeat="st in catalog" value="{{st.price}}">{{st.name}}{{st.price}}</option>
</select>

Далее в контроллер добавить функцию и все работает)

$scope.sumF=function(a){
    $scope.sumEnd=0;
    for(let i=0;i<a.length;i++){
      $scope.sumEnd +=parseInt(a[i]);
    }
  }

Далее в переменной $scope.sumEnd есть та самая необходимая сумма

Comments

[s_pyanov]

Проблема проявляется если я на странице добавляю отображение суммы!

ниже код контроллера

$scope.sumF=function(a){
                            $scope.summTotal = 0;
                            var sum=0;
                            $scope.sumEnd=0;
                            for(var i = 0;i<a.length;i++){
                              $scope.sumEnd +=parseInt(a[i]);
                              console.log("i = ",i);
                              console.log("a[",i,"]=",a[i]);
                            }
                            $scope.summTotal = $scope.sumEnd;
                            console.log($scope.summTotal)
                        };

на странице добавляю отображение суммы
<div > {{ summTotal }}</div>

ниже добавлены шаги с 1 по 4 - без <div > {{ summTotal }}</div>
А шаг 5, если на странице есть
<div > {{ summTotal }}</div>


вот здесь начинается проблема