Question

我正在寻找这个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

Answer 1

您可以使用groupBy来实现此目的。

＆＃13;

// 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'
    }];

  
 });

＆＃13;

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

＆＃13;

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

＆＃13;

当旧标签与新标签不匹配时，将行添加到表中

1 个答案: