古いラベルが新しいラベルと一致しないときテーブルへの行追加

私はこのangularjsコードの助けを探しています。古いラベルが新しいラベルと一致しないときテーブルへの行追加

{{notification.label}}が1つの値から別の値に変更されると（テーブルの内容はデータベースからのものです）、新しい行を追加したいと思います。しかし、私はそれが動作するようにすることはできませんが、主にこれをどうやって行うのかわからないからです。好ましくは、テーブルを閉じて新しいテーブルを作成することもできますが、ループが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

？ – Vivz

Ajaxコード – RvdM

の助けを借りて読み込まれたデータベースからのデータそのデータベースから変更されたかどうかはどのようにわかりますか？だから、基本的にいくつかの値がデフォルトでページにあり、誰かがデータベースの値をラベルのために変更し、新しい行を追加する必要がありますか？ – Vivz

を区切っているとき、を使用できますこれを達成するために210。 notification.labelどのように変化しているか

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

古いラベルが新しいラベルと一致しないときテーブルへの行追加

答えて

関連する問題