Вложенный ng-repeat имеет повторяющиеся значения

Question

Я пытаюсь получить отчет, используя Angular JS,

    <tbody ng-repeat="p in GettingBillingPage track by $index " ng-init="idx = $index">
        <tr>
            <td><input type="button" class="btn btn-primary waves-effect" 
                       value="Cancel" ng-click="GetBillDetails(idx)" />
            </td>
            <td>{{p.BillNo}}</td>
            <td>{{p.FinalTotal | number:2}}</td>
            <td>{{p.Name}}</td>
            <td>{{p.purchaseDate |date}}</td>
            <td>
                <table cellpadding="0" cellspacing="0" class="table table-bordered">
                    <tr>
                        <th>Product Name</th>
                        <th>Quantity</th>
                        <th>Rate</th>

                    </tr>
                    <tbody ng-repeat="q in GettingBillingPage " ng-if="q.BillNo == p.BillNo">
                        <tr>
                            <td>{{q.ProductName}}</td>
                            <td>{{q.quantity}}</td>
                            <td>{{q.Rate | number:2}}</td>

                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>

Даже когда оба ng-repeat ссылаются на один Массив, billno повторяется в зависимости от количества проданных предметов

Пример таблицы вывода

Как избежать повторения счета № и, следовательно, списка товаров

Answer 1

вам нужно распечатать уникальные значения в external ng-repeat;Это можно сделать с помощью пользовательского фильтра ...

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.GettingBillingPage = [{
      "BillNo": 1,
      "FinalTotal": 203,
      "Name": "test name 1",
      "purchaseDate": '13',
      "ProductName": "abc 1",
      "quantity": 9,
      "Rate": 12
    },
    {
      "BillNo": 1,
      "FinalTotal": 203,
      "Name": "test name 1",
      "purchaseDate": '13',
      "ProductName": "abc 2",
      "quantity": 9,
      "Rate": 22
    },
    {
      "BillNo": 2,
      "FinalTotal": 421,
      "Name": "test name 2",
      "purchaseDate": '24',
      "ProductName": "def",
      "quantity": 9,
      "Rate": 12
    },
    {
      "BillNo": 3,
      "FinalTotal": 625,
      "Name": "test name 3",
      "purchaseDate": '72',
      "ProductName": "xyz 1",
      "quantity": 9,
      "Rate": 12
    },
    {
      "BillNo": 3,
      "FinalTotal": 625,
      "Name": "test name 3",
      "purchaseDate": '72',
      "ProductName": "xyz 2",
      "quantity": 9,
      "Rate": 12
    },
    {
      "BillNo": 3,
      "FinalTotal": 625,
      "Name": "test name 3",
      "purchaseDate": '72',
      "ProductName": "xyz 3",
      "quantity": 9,
      "Rate": 12
    },
    {
      "BillNo": 4,
      "FinalTotal": 928,
      "Name": "test name 4",
      "purchaseDate": '96',
      "ProductName": "ghi",
      "quantity": 9,
      "Rate": 12
    },
  ];

});

app.filter('unique', function() {
  return function(collection, keyname) {
    var output = [],
      keys = [];

    angular.forEach(collection, function(item) {
      var key = item[keyname];
      if (keys.indexOf(key) === -1) {
        keys.push(key);
        output.push(item);
      }
    });
    return output;
  };
});

td{border:0.5px dotted blue; padding:0 5px;}
table{border:1px solid red; margin:10px;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <table>
    <tbody ng-repeat="p in GettingBillingPage | unique : 'BillNo' ">
      <tr>
        <td>{{p.BillNo}}</td>
        <td>{{p.FinalTotal | number:2}}</td>
        <td>{{p.Name}}</td>
        <td>{{p.purchaseDate |date}}</td>
        <td>
          
          <table>
            <tbody ng-repeat="q in GettingBillingPage" ng-if="q.BillNo == p.BillNo">
              <tr>
                <td>{{q.ProductName}}</td>
                <td>{{q.quantity}}</td>
                <td>{{q.Rate | number:2}}</td>
              </tr>
            </tbody>
          </table>
          
        </td>
      </tr>
    </tbody>
  </table>


</div>