JSFiddle - React, Tailwind, and code Playground

by Darryl Rubarth

HTML

<div ng-app>
    <div ng-controller='TestGroupingCtlr'>
        <div ng-repeat='item in MyList'>
            <div ng-show="newGrouping($parent.MyList, 'GroupByFieldName', $index);">
                <h2>{{item.GroupByFieldName}}</h2>
            </div>
            {{item.whatever}}
        </div>
    </div>
</div>

JavaScript

function TestGroupingCtlr($scope) {

  $scope.MyList = [
    {GroupByFieldName:'Group 1', whatever:'abc'},
    {GroupByFieldName:'Group 1', whatever:'def'},
    {GroupByFieldName:'Group 2', whatever:'ghi'},
    {GroupByFieldName:'Group 2', whatever:'jkl'},
    {GroupByFieldName:'Group 2', whatever:'mno'}
  ];
   
$scope.newGrouping = function(group_list, group_by, index) {
    if (index > 0) {
      prev = index - 1;
      if (group_list[prev][group_by] !== group_list[index][group_by]) {
        return true;
      } else {
        return false;
      }
    } else {
      return true;
    }
  };
}