Angularjs - 如何将特定列中具有相同值的行分组到一个单元格中？

I have these columns:

我有这些专栏：

Column1     Column2      Column3
   1           a            x
   1           b            y
   2           c            z

I want the result to be:

我希望结果如下：

Column1     Column2      Column3
   1           a            x
               b            y
   2           c            z

where row 1 and row 2 is in the same cell.

其中第1行和第2行在同一个单元格中。

How can I achieve this with Angularjs? I've read some others uses external dependencies. Can I achieve this without using external dependencies?

如何使用Angularjs实现这一目标？我读过其他一些使用外部依赖的东西。我可以在不使用外部依赖项的情况下实现此目

Here is my sample code (run the snippet):

这是我的示例代码（运行代码段）：

<div ng-app="myApp" ng-controller="myCtrl">
    <table>
        <thead>
            <tr>
                <th class="col-md-1 col-xs-1 col-sm-1">Col1</th>
                <th class="col-md-1 col-xs-1 col-sm-1">Col2</th>
                <th class="col-md-1 col-xs-1 col-sm-1">Col3</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in obj">

                <td> {{ item.col1 }} </td>
                <td> {{ item.col2 }} </td>
                <td> {{ item.col3 }} </td>
            </tr>
        </tbody>
    </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.obj = [{ col1: 1, col2: "a", col3: "x" }, { col1: 1, col2: "b", col3: "y" }, { col1: 2, col2: "c", col3: "z" }];
    });
</script>

2 个解决方案

#1

as I mention on the comment.

正如我在评论中提到的那样。

<div ng-app="myApp" ng-controller="myCtrl">
    <table>
        <thead>
            <tr>
                <th class="col-md-1 col-xs-1 col-sm-1">Col1</th>
                <th class="col-md-1 col-xs-1 col-sm-1">Col2</th>
                <th class="col-md-1 col-xs-1 col-sm-1">Col3</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in obj">
                <td> {{ item.col1 !== obj[$index -1].col1 ? item.col1 : '' }} </td>
                <td> {{ item.col2 }} </td>
                <td> {{ item.col3 }} </td>
            </tr>
        </tbody>
    </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.obj = [{ col1: 1, col2: "a", col3: "x" }, { col1: 1, col2: "b", col3: "y" }, { col1: 2, col2: "c", col3: "z" }];
    });
</script>

the idea to tricky the output with ternary operator

使用三元运算符来处理输出的想法

condition ? true : false

#2

This is a little tricky but try this.

这有点棘手，但试试这个。

<div ng-app="myApp" ng-controller="myCtrl">
<table>
    <thead>
        <tr>
            <th class="col-md-1 col-xs-1 col-sm-1">Col1</th>
            <th class="col-md-1 col-xs-1 col-sm-1">Col2</th>
            <th class="col-md-1 col-xs-1 col-sm-1">Col3</th>
        </tr>
    </thead>
    <tbody ng-repeat="item in obj | unique: 'col1'">
        <tr ng-repeat="item in obj  | filterdataacckeyword:'col1':item.col1">
            <td> <span ng-if="$index == 0"> {{ item.col1 }} </span> </td>
            <td> {{ item.col2 }} </td>
            <td> {{ item.col3 }} </td>
        </tr>
    </tbody>
</table>

Then copy this filter to your code

然后将此过滤器复制到您的代码中

app.filter('filterdataacckeyword', [function () {
      return function (input, keyinclude, search) {
          input = input || [];
          var out = [];
          if(search!=undefined) {
               input.forEach(function (item) {
                   var flag = false;
                   keyinclude.split(',').forEach(function(key) {
                       if (!(typeof yourVariable === 'object') && item[key]!=null && item[key]!="." && item[key]!="" &&
                           item[key].toLowerCase() == search.toLowerCase()) {
                           if(!flag) {
                               out.push(item);
                               flag=true;
                           }
                       }
                   });
               });
           }
           else {
               out = input;
           }
           return out;
       };
   }]);

P.S. I purposely placed the first ng-repeat on the tbody. It will loop the unique col1 while the inner tr will loop the cols with same col1

附：我故意将第一个ng-repeat放在tbody上。它将循环唯一的col1，而内部tr将使用相同的col1循环cols

#1