當舊標籤不匹配新標籤添加行到表

我正在尋找這個angularjs代碼的一些幫助。當舊標籤不匹配新標籤添加行到表

當{{notification.label}}從一個值更改爲另一個（表的內容來自數據庫）我想添加一個新行。但是我無法完成它的工作，主要是因爲我不知道如何完成這項工作。最好我甚至關閉表並創建一個新的，但因爲循環是在一個TR我猜這是不可能的。

尋找一些方向，也許是一個例子。已經嘗試過使用If指令，但無法將舊標籤與新標籤進行比較。

<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>

數據庫：

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

我希望看到這樣的事情（表）

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

更妙的是當那些是2分隔表

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

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

來源

2017-07-28 RvdM

如何notification.label變化？ – Vivz

它的數據來自一個數據庫，它是藉助Ajax代碼加載的 – RvdM

我們如何知道它是否已經從數據庫中更改？所以基本上有些值是默認在頁面上，有人會改變數據庫中的標籤值，然後你需要添加一個新的行？ – Vivz

您可以使用groupBy來實現這一點。

// 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>

來源

2017-07-28 12:05:24 Vivz

當舊標籤不匹配新標籤添加行到表

回答

相關問題