сумма значений в списке, используя угловой способ

0

У меня есть небольшой фрагмент образца здесь, где я пытался получить в общей сложности значений углового, как,

<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total = 0">
  <ul>
      <li  ng-repeat="x in myarr" >  {{x.val}} 
     <span ng-if="$last">, Total - {{total = total+x.val}}</span>
      </li>
  </ul>
</div>

Но сумма неверна. Как это можно достичь?

EDIT: Я пытаюсь получить общее количество в цикле ng-repeat рядом с последним элементом. В этом вопросе есть принятый ответ, и ниже ответ также работает в той же логике. Но в этом методе функция getTotal() будет вызывать myarr.length раз и каждый раз, когда массив циклы в контроллере вправо? Так, например, в вопросе, массив будет полностью зацикливаться 6 раз (myarr.length + один раз в ng-repeat т. myarr.length 5 + 1). Я ошибаюсь?

  • 1
    Возможный дубликат Расчет суммы повторяющихся элементов в AngularJS ng-repeat
  • 0
    Я пытаюсь получить общее количество в цикле ng-repeat рядом с последним элементом.
Показать ещё 1 комментарий
Теги:

3 ответа

1
Лучший ответ

Попробуйте этот метод, никакой функции не используется в контроллере, используя ng-init в ng-repeat

angular.module('myApp', []).controller('myCtrl', function($scope) {

$scope.myarr = [{id: 1, val: 500},{id: 2,val: 300},{id: 3,val: 200},{id: 4,val: 600},{id: 5,val: 100}];

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total=0">
  <ul >
      <li ng-repeat="x in myarr" ng-init="$parent.total = $parent.total + (x.val)"> {{x.val}} 
      <span ng-if="$last">{{total}}</span>
      </li>
  </ul>
</div>
Другой метод,

Используйте array.reduce для добавления суммы массива Link

angular.module('myApp', []).controller('myCtrl', function($scope) {

$scope.myarr = [{id: 1, val: 500},{id: 2,val: 300},{id: 3,val: 200},{id: 4,val: 600},{id: 5,val: 100}];
$scope.addTotal = function(){
var sum = $scope.myarr.reduce($scope.add);
return sum.val;
}
$scope.add = function(a,b){
 return {val:a.val + b.val};
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total=0">
  <ul >
      <li ng-repeat="x in myarr" >  {{x.val}} 
      <span ng-if="$last">{{addTotal()}}</span>
      </li>
  </ul>
</div>
Поделиться
  • 1
    Метод № 1 Круто ..! Престижность angularjs $parent
  • 0
    Примите ответ пожалуйста
1

Вы можете использовать angular.forEach для цикла и иметь общий счет.

angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.total = 0;
 $scope.myarr = [{id: 1, val: 500},{id: 2,val: 300},{id: 3,val: 200},{id: 4,val: 600},{id: 5,val: 100}];
  angular.forEach($scope.myarr, function(value){$scope.total+=value.val});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="app" ng-app="myApp" ng-controller="myCtrl">
  <ul >
      <li ng-repeat="x in myarr" >  {{x.val}} 
      <span ng-if="$last">{{total}}</span>
      </li>
  </ul>
</div>
Поделиться
1

Попробуйте выполнить все вычисления в самом угловом контроллере и сохраните его в varaible. Но если вы беспокоитесь о постоянном изменении значений в массиве, вы также можете использовать функцию calcTotal в вашем контроллере. Также ng-repeat должен быть на li а не ul.

<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total = 0">
  <ul >
      <li ng-repeat="x in myarr">  {{x.val}} 
     <span ng-if="$last">, Total - {{getTotal()}} or {{totalValue}}</span>
      </li>
  </ul>
</div>

Ваш контроллер будет как

angular.module('myApp', []).controller('myCtrl', function($scope) {
 $scope.myarr = [{id: 1, val: 500},{id: 2,val: 300},{id: 3,val: 200},{id: 4,val: 600},{id: 5,val: 100}];
 //first approach
 $scope.totalValue = 0;
 for(i=0;i<$scope.myarr.length;i++){
 if($scope.myarr[i] && $scope.myarr[i].val)
    $scope.totalValue+=$scope.myarr[i].val;
 }

 //OR

 //second approach
 $scope.getTotal = function(){
 var total = 0;
 for(i=0;i<$scope.myarr.length;i++){
 if($scope.myarr[i] && $scope.myarr[i].val)
    total+=$scope.myarr[i].val;
 }
 return total;
 }
});

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

Поделиться
  • 0
    К вашему сведению, я должен получить всего 1700 в данном примере и массив генерируется динамически.
  • 0
    Я не добавил реальные функции JavaScript в контроллер. Проверьте снова сейчас.
Показать ещё 3 комментария

Ещё вопросы

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