How to Filter table data with AngularJs if column_name is double time?

I use AngularJs and I have the below code :

<tr ng-repeat=" a in table>
  <td>{{a.ClientID}}</td>
  <td>{{a.SiteName}}</td>
  <td>{{a.Group}}</td>
</tr>

the result of this table is:

ClientID    SiteName    Group
=========  ==========  =======
    1       Ikaria      Group
    2       Ikaria      Group
    3       Limnos      Null
    4       Pythion     Group

I want to create a filter when AlarmGroup = Group and SiteName multiple times gives me below result :

ClientID    SiteName    Group
=========  ==========  =======
    1 (+)   Ikaria      Group
    3       Limnos      Null
    4       Pythion     Group

When I click ClientID (+) I want to see and row with ClientID = 2

Do you have any idea ? Thanks!!

Solution

You can easily acieve that using custom unique filter.

Here is the working code

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
  <script>
    (function() {

      var app = angular.module("testApp", ['ui.bootstrap']);
      app.controller('testCtrl', ['$scope', '$http', function($scope, $http) {
        $scope.showDupes = function(site){
          if($scope.siteName == site){
            $scope.siteName = undefined;
          }
          else{
            $scope.siteName = site; 
          }
        };
        $scope.filter='SiteName';
        $scope.getCount = function(i) {
          var iCount = iCount || 0;
          for (var j = 0; j < $scope.tableData.length; j++) {
            if ($scope.tableData[j].SiteName == i) {
              iCount++;
            }
          }
          return iCount;
        }
        $scope.tableData = [{"ClientID":1,"SiteName":"Ikaria","Group":"Group"},{"ClientID":2,"SiteName":"Ikaria","Group":"Group"},{"ClientID":3,"SiteName":"Limnos","Group":"Null"},{"ClientID":4,"SiteName":"Limnos","Group":"Null"},{"ClientID":5,"SiteName":"Limnos","Group":"Null"},{"ClientID":6,"SiteName":"Limnos","Group":"Null"},{"ClientID":7,"SiteName":"Limnos","Group":"Null"},{"ClientID":8,"SiteName":"Pythion","Group":"Group"}];
      }]);

      app.filter('unique', function() {

        return function(items, filterOn, dupe) {
          
          if (filterOn === false) {
            return items;
          }

          if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
            var hashCheck = {},
              newItems = [];

            var extractValueToCompare = function(item) {
              if (angular.isObject(item) && angular.isString(filterOn)) {
                return item[filterOn];
              } else {
                return item;
              }
            };

            angular.forEach(items, function(item) {
              var valueToCheck, isDuplicate = false;
              for (var i = 0; i < newItems.length; i++) {
                if (newItems[i][filterOn] != dupe && angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
                  isDuplicate = true;
                  break;
                }
              }
              
              item.isDuplicate = isDuplicate;
              newItems.push(item);

            });
            items = newItems;
          }
          return items;
        };
      });


    }());
  </script>
  <style></style>
</head>

<body ng-app="testApp">
  <div ng-controller="testCtrl">
    <table class="table">
      <tr ng-repeat="a in tableData | unique:filter:siteName as filteredTable" ng-hide="a.isDuplicate">
        <td>{{a.ClientID}}</td>
        <td>
          {{a.SiteName}} 
          <button ng-show="getCount(a.SiteName)> 1 && a.SiteName != siteName" ng-click="showDupes(a.SiteName)">+ {{getCount(a.SiteName)-1}}</button>
        </td>
        <td>{{a.Group}}</td>
      </tr>
    </table>
    <button ng-click="showDupes(undefined)">Reset</button>
  </div>
</body>

</html>