单独的类别项角度JS

Separate category item angularJS

本文关键字：JS 单独      更新时间：2023-09-26

如何在 AngularJS 中列出项目并按类别分隔它们，如下所示：

<h3>Products</h3>
  <div ng-repeat="item in products">
  <div>
      {{item.category}}
  </div>
       <p>
         {{item.name}}
       </p>
        <p>
         {{item.price}}
       </p>
  </div>

$scope：

$scope.products = [
        {
           name:"product1",
           price:"450",
           category:"cat1"
        },
         {
           name:"product2",
           price:"450",
           category:"cat2"
        },
         {
           name:"product3",
           price:"450",
           category:"cat1"
        }
    ];

我希望它看起来像这样：

猫1

--->产品1

--->产品3

猫2

--->产品2...

请帮忙！

参见 [小提琴]）（http://jsfiddle.net/Lvc0u55v/2846/）

我做了一些格式化以所需的格式发送数据。

$scope.productCategories = {};
  for (var i = 0; i < products.length; i++) {
    if ($scope.productCategories[products[i].category] == undefined)
      $scope.productCategories[products[i].category] = [];
    $scope.productCategories[products[i].category].push({
      name: products[i].name,
      price: products[i].price
    });

}

HTML格式已关闭，但我希望这能给您一个想法

你可以在

ng-repeat中使用groupBy filter。 应在应用中添加 GroupBy 筛选器依赖项。 

var app = angular.module("app",['angular.filter']);
app.controller("ctrl" , function($scope){
  
  $scope.products = [ { name:"product1", price:"450", category:"cat1" }, { name:"product2", price:"450", category:"cat2" }, { name:"product3", price:"450", category:"cat1" } ];
  
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
       <h3>Products</h3>
  <div ng-repeat="(key,value) in products | groupBy: 'category'">
  <div>
      {{key}}
  </div>
    <div ng-repeat="item in value">
       <p>
         {{item.name}}
       </p>
        <p>
         {{item.price}}
       </p>
      </div>
  </div>
</div>

相关文章：