When old label does not match new label add row to table

Question

I'm looking for some help with this angularjs code.

When {{notification.label}} changes from one value to another (the content of the table is from a database) I would like to add a new row. However I can't get it to work and mainly because I don't know how to get this done. Preferably I even close the table and create a new one but because the loop is in a TR I'm guessing this is not possible.

Looking for some direction and maybe an example. Already experimented with the If directive but wasn't able to compare old label with a new label.

<div id=postModule data-ng-app="postModule" data-ng-controller="PostController" data-ng-init="init()"
    <form novalidate name="notificationForm">
        <table class="table table-bordered table-hover table-striped">
            <tr data-ng-repeat="notification in post.notification | orderBy : 'label'">
                <td>
                    {{notification.label}}
                </td>
                <td>
                    {{notification.vendor}}
                </td>

                <td>
                    {{notification.product}}
                </td>   
                <td>
                    {{notification.version}}
                </td>                               
                <td>
                    {{notification.cve}}
                </td>
                <td>
                    {{notification.cvsscore}}"
                </td>
            </tr>
        </table>
    </form>
</div>

Database:

notification.label || notification.vendor || notification.product
expensive          || Samsung             || Galaxy
expensive          || Apple               || iPhone
budget             || Huawai              || X
budget             || Huawai              || Y

I would like to see something like this (table)

notification.label || notification.vendor || notification.product
expensive          || Samsung             || Galaxy
expensive          || Apple               || iPhone 
notification.label || notification.vendor || notification.product
budget             || Huawai              || X
budget             || Huawai              || Y

And even better when those are 2 seperated tables

notification.label || notification.vendor || notification.product
expensive          || Samsung             || Galaxy
expensive          || Apple               || iPhone 

notification.label || notification.vendor || notification.product
budget             || Huawai              || X
budget             || Huawai              || Y

its data from a database which is loaded in with the help of Ajax code — RvdM, Jul 28 '17 at 11:16
How will we know if it has changed from database? So basically some values are there by default on the page and someone will change the value in database for label and then you need to add a new row? — Vivz, Jul 28 '17 at 11:18
Added database layout to the original question. Currently its sorted by label but at the moment expensive changes into budget I would like to add a new row to the front-end table — RvdM, Jul 28 '17 at 11:22
Why don't you use groupBy label value https://stackoverflow.com/questions/23493063/angular-ng-repeat-conditional-wrap-items-in-element-group-items-in-ng-repeat — Vivz, Jul 28 '17 at 11:29
Never used it. Always used `orderBy : '-label'` and didn't know GroupBy existed. Going to look into this. Thanks! — RvdM, Jul 28 '17 at 11:33
@RvdM I have posted an answer below. You can style the table to your requirements — Vivz, Jul 28 '17 at 12:19
@Vivz thanks! works great. One thing to notice is that you need angular-filter because by default groupBy is not supported by angularjs. — RvdM, Jul 28 '17 at 15:10

Vivz · Accepted Answer · 2017-07-28T12:40:45.600

You can use groupBy to achieve this.

// Code goes here

angular.module('app',['angular.filter'])
  .controller('MainController', function($scope) { 
    
    $scope.notifications = [{
        label: 'expensive',
        vendor: 'Samsung             '
    }, {
        label: 'expensive',
        vendor: 'sony'
    }, {
        label: 'expensive',
        vendor: 'moto'
    }, {
        label: 'budget',
        vendor: 'iphone'
    }, {
        label: 'budget',
        vendor: 'x'
    }];

  
 });

.custom{
margin-bottom:0px !important;
}
.custom>tbody>tr>th
{
   width: 50%;
    float: left;
    border: none !important;
}

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.1/angular-filter.js"></script>    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <meta name="description" content="[groupBy and sum example]"/>
    <meta charset="utf-8">
    
    <title>angular-filter - groupBy and sum example</title>
  </head>


  <body>
<div ng-controller="MainController">
<ul ng-repeat="(key, value) in notifications | groupBy: 'label'">
  <table class="table table-bordered table-hover table-striped   custom">
            <tr>
                <th>
                    notification.label
                </th>
                <th>
                    notification.vendor
                </th>   
            </tr>
</table>            
<table class="table table-bordered table-hover table-striped">
            <tr data-ng-repeat="notification in value">
                <td>
                    {{notification.label}}
                </td>
                <td>
                    {{notification.vendor}}
                </td>   
            </tr>
        </table>
        </ul>
</div>
  </body>

</html>

When old label does not match new label add row to table

1 Answers1