Question

我有这些专栏：

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

我希望结果是：

Column1     Column2      Column3
   1           a            x
               b            y
   2           c            z

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

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

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

＆＃13;

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

＆＃13;

Answer 1

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

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

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

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。我故意将第一个ng-repeat放在tbody上。它将循环唯一的col1，而内部tr将使用相同的col1

循环cols

Answer 2

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

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

用三元运算符

来搞砸输出的想法

condition ? true : false

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

2 个答案: