如何使用angularjs根据名称过滤和分组数据？答案

【问题标题】：How to filter and group the data based on name using angularjs?如何使用angularjs根据名称过滤和分组数据？
【发布时间】：2020-06-07 20:24:30
【问题描述】：

我有以下属于每个名称的描述列表。请让我知道如何分组或列出每个名称的描述。

html:

<body ng-app="app" ng-controller="MainCtrl">

    <div ng-repeat="nameGroup in loopData"> <!-- this ng-repeat should be available as per my requirement -->
        <div ng-repeat="loopData in nameGroup.values track by $index" ><!-- this ng-repeat should be available as per my requirement -->

    <!-- {{loopData}} -->
        <div class="text-center merged">{{loopData.name}}</div><!-- ng-if="$index === 0" -->
        <div class="text-center">{{loopData.description}}</div> 

     </div>
     </div>
</body>

控制器：

var app = angular.module('app', ['angular.filter']);

app.controller('MainCtrl', function($scope) {
  $scope.finalLoopData = {};

  $scope.loopData = [{ "country":"Abc", "id":"001", "mynumbers":[], 
    "values": [
      {"description": "first desc", "name": "First Test Name"},
      {"description": "second desc", "name": "First Test Name"},
      {"description": "third desc", "name": "First Test Name"},
      {"description": "fourth desc", "name": "Second Test Name"},
      {"description": "fifth desc", "name": "Second Test Name"},
      {"description": "sixth desc", "name": "Third Test Name"},
      {"description": "seventh desc", "name": "Third Test Name"},
      {"description": "eighth desc", "name": "Third Test Name"},
      {"description": "ninth desc", "name": "Third Test Name"},
      {"description": "tenth desc", "name": "Third Test Name"},
      {"description": "eleventh desc", "name": "Fourth Test Name"},
      {"description": "twelfth desc", "name": "Fourth Test Name"}
    ]
  }];

  $scope.arrayToObject = function () {
    var finalLoopData = {};
    angular.forEach($scope.loopData[0].values, function (value, key) {
        //console.log(value);//gives all value objects
        if (!finalLoopData[value.name]) { 
             finalLoopData[value.name] = new Array();
             //console.log("name: "+value.name);//First Test Name //Second Test Name //Third Test Name //Fourth Test Name
        }
        finalLoopData[value.name].push(value);
    });
    $scope.finalLoopData = finalLoopData;
  }
  $scope.arrayToObject();
});

如果我运行此代码，我会得到带有名称的个人描述，而不是组名称，这是我的预期输出，类似于以下：

第一个测试名称

第一个描述
秒数
第三个描述

第二个测试名称

第四个描述
第五阶

第三个测试名称

第六个描述
第七阶
第八个描述
第九个描述
第十个降序

第四个测试名称

第十一阶
第十二个降序

创建Filter:

【问题讨论】：

标签： javascript angularjs filter angularjs-ng-repeat grouping

【解决方案1】：

更新

如果您无法更改模板中的循环，请考虑以下事项：

模板

<body ng-app="app" ng-controller="MainCtrl">
  <!-- Original loops -->
  <div ng-repeat="nameGroup in loopData">
    <div ng-repeat="loopData in nameGroup.values track by $index">

      <!-- Data name -->
      <strong>{{loopData.name}}</strong>

      <!-- Loop data descriptions -->
      <ul ng-repeat="description in loopData.descriptions">
        <li>{{description}}</li>
      </ul>

    </div>
  </div>
</body>

控制器

var app = angular.module('app', ['angular.filter']);

app.controller('MainCtrl', function($scope) {

  $scope.loopData = [
    {
      country: "Abc",
      id: "001",
      mynumbers: [],
      values: [
        { description: "first desc", name: "First Test Name" },
        { description: "second desc", name: "First Test Name" },
        { description: "third desc", name: "First Test Name" },
        { description: "fourth desc", name: "Second Test Name" },
        { description: "fifth desc", name: "Second Test Name" },
        { description: "sixth desc", name: "Third Test Name" },
        { description: "seventh desc", name: "Third Test Name" },
        { description: "eighth desc", name: "Third Test Name" },
        { description: "ninth desc", name: "Third Test Name" },
        { description: "tenth desc", name: "Third Test Name" },
        { description: "eleventh desc", name: "Fourth Test Name" },
        { description: "twelfth desc", name: "Fourth Test Name" }
      ]
    }
  ];

  this.$onInit = function() {
    $scope.loopData.forEach(function(data) {
      const groupedValues = {};

      // group values by name
      data.values.forEach(function(value) {
        // initialize name group
        if (!groupedValues[value.name]) {
          groupedValues[value.name] = {
            name: value.name,
            descriptions: []
          };
        }

        // add description to name group
        groupedValues[value.name].descriptions.push(value.description);
      });

      // update values
      data.values = Object.values(groupedValues);
    });
  };

});

请注意，$onInit 函数会将$scope.loopData 转换为以下内容：

[
  {
    "country": "Abc",
    "id": "001",
    "mynumbers": [],
    "values": [
      {
        "name": "First Test Name",
        "descriptions": [
          "first desc",
          "second desc",
          "third desc"
        ]
      },
      {
        "name": "Second Test Name",
        "descriptions": [
          "fourth desc",
          "fifth desc"
        ]
      },
      {
        "name": "Third Test Name",
        "descriptions": [
          "sixth desc",
          "seventh desc",
          "eighth desc",
          "ninth desc",
          "tenth desc"
        ]
      },
      {
        "name": "Fourth Test Name",
        "descriptions": [
          "eleventh desc",
          "twelfth desc"
        ]
      }
    ]
  }
]

原答案

在您的 html 中，您不会循环处理已处理的 finalLoopData 变量。此外，要显示组名一次，您需要在第一个循环（而不是第二个）中使用它。

考虑以下代码：

模板

<body ng-app="app" ng-controller="MainCtrl">
  <!-- Loop final data -->
  <div ng-repeat="nameGroup in finalLoopData">

    <!-- Group name -->
    <strong>{{nameGroup.name}}</strong>

    <!-- Loop group descriptions -->
    <ul ng-repeat="description in nameGroup.descriptions track by $index">
      <li>{{description}}</li>
    </ul>

  </div>
</body>

控制器

var app = angular.module('app', ['angular.filter']);

app.controller('MainCtrl', function($scope) {

  $scope.finalLoopData = {};

  $scope.loopData = [
    {
      country: "Abc",
      id: "001",
      mynumbers: [],
      values: [
        { description: "first desc", name: "First Test Name" },
        { description: "second desc", name: "First Test Name" },
        { description: "third desc", name: "First Test Name" },
        { description: "fourth desc", name: "Second Test Name" },
        { description: "fifth desc", name: "Second Test Name" },
        { description: "sixth desc", name: "Third Test Name" },
        { description: "seventh desc", name: "Third Test Name" },
        { description: "eighth desc", name: "Third Test Name" },
        { description: "ninth desc", name: "Third Test Name" },
        { description: "tenth desc", name: "Third Test Name" },
        { description: "eleventh desc", name: "Fourth Test Name" },
        { description: "twelfth desc", name: "Fourth Test Name" }
      ]
    }
  ];

  this.$onInit = function() {
    const finalLoopData = {};
    $scope.loopData[0].values.forEach(function(item) {
      // initialize name group
      if (!finalLoopData[item.name]) {
        finalLoopData[item.name] = {
          name: item.name,
          descriptions: []
        };
      }

      // add description to name group
      finalLoopData[item.name].descriptions.push(item.description);
    });

    // apply results
    $scope.finalLoopData = finalLoopData;
  };

});

【讨论】：

感谢您的帮助和解决方案，但根据我的要求，我需要按原样使用我的第一个 ng-repeats，最重要的是，我需要得到我想要的输出。如果我使用上面的，那么我现有的功能就会中断。您可以在我的 html 代码帖子中看到它们可用。
我已更新答案以保留初始模板中的循环。
感谢您的帮助和解决方案。它真的帮了我很多。抱歉我的回复晚了。