Как создать промежуточные итоги в ng-repeat в Angular JS

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

Линии деталей...

<tr data-ng-repeat-start = "t in testReferrers">
    <td>{{t.ReferrerName}}</td>
    <td>{{t.AddressLine1}}}</td>
    <td>{{t.DatePlaced  | date:'MM/dd/yyyy'}}</td>
    <td>{{t.InvoiceNumber }}</td>
    <td>{{t.InvoiceAmountLessDiscount | currency : $ : 2 }}</td>
</tr>

Моя первая попытка вывести строку промежуточного итога, но я не знаю, как рассчитать {{subTotal}} и как контролировать появление этой строки. Мне нужна возможность группировки и нижнего колонтитула группы, но я не знаю, как это сделать в AngularJS. Я собирался использовать JQuery, чтобы найти subTotalRow и показать или скрыть...

<tr id = "subtotalRow" data-ng-repeat-end style = "display:none">
    <td colspan=3></td>
    <td style = "border-top: solid 1px #000000">Total:</td>
    <td style = "border-top: solid 1px #000000">{{subTotal | currency : $ : 2 }}</td>
</tr>

Желаемый результат...

Как создать промежуточные итоги в ng-repeat в Angular JS

angularjs angularjs-ng-repeat

04.03.2019 08:49

Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?

Директивы позволяют расширять HTML новыми элементами и атрибутами и даже создавать собственные структурные директивы для манипулирования DOM. С...

Разница между Angular и React

React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...

587

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

angular.module('app', []).controller('ctrl', function($scope){
  $scope.data = [
    {Referrer: 'Henry', Amount: 20, Location: 'NY'},
    {Referrer: 'Tom', Amount: 10, Location: 'London'},    
    {Referrer: 'Sam', Amount: 10, Location: 'Paris'},
    {Referrer: 'Henry', Amount: 10, Location: 'NY'},
    {Referrer: 'Tom', Amount: 20, Location: 'London'},    
    {Referrer: 'Henry', Amount: 30, Location: 'NY'}
  ];
  $scope.sum = function(name){
    return $scope.data.filter(function(x) { return x.Referrer == name; })
      .map(function(x) { return x.Amount; }).reduce(function(a, b) { return a + b; });
  }
})

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
.totalRow{
  border-style: solid;  
}
.total{  
  text-align: right;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  <table>
    <thead>
      <tr>
        <th>Referrer</th>
        <th>Location</th>        
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-init='next = $index + 1' ng-repeat-start='item in dataSorted = (data | orderBy : "Referrer")'>
        <td>{{item.Referrer}}</td>
        <td>{{item.Location}}</td>
        <td>{{item.Amount}}</td>
      </tr>
      <tr class='totalRow' ng-repeat-end ng-if='!dataSorted[next] || (dataSorted[next].Referrer != item.Referrer)'>
        <td colspan='2' class='total'>Total:</td>        
        <td>{{sum(item.Referrer)}}</td>
      </tr>
    </tbody>
  </table>
</div>

04.03.2019 09:28

Другие вопросы по теме

Как получить «родительское имя» и прочитать объект в ng-repeat AngujarJs?

AngularJS: ngIf в массиве массива с разными свойствами

Проблема с выводом данных с AngularJS на HTML

Как ng-repeat данные ответа

Angularjs ui-select Динамическое сопоставление объектов внутри повтора

Многослойный JSON для формата ng-repeat AngularJS

Как добавить динамический столбец в фильтр ng-repeat

Ng-repeat для сравнения и подсчета объектов на основе значения

Почему записи ng-repeat умножаются в поле со списком в Aspnet Mvc?

Изменения в переменной области не обновляют DOM

Как создать промежуточные итоги в ng-repeat в Angular JS

Ответы 1

Другие вопросы по теме

Похожие вопросы