在同一行中显示相同类别的项目，并且仅显示6个项目

Question

嗨，我是angularjs的新手。我设计了正在显示的购物车     来自db的项目。我想在同一行中显示相同类别的项目。一世     不知道如何显示它。这是我的代码。

我的js代码

app.controller("productsview",["$scope","$http",function($scope,$http){
$scope.productload = true;
$scope.getcategory = function(){
    $http.get("db/getcategory.php").then(function(resp){
        $scope.categories = resp.data;
        console.log(resp.data);
        $scope.getsubcategory();
    });
};
$scope.getsubcategory = function(){
  var pcount = 0;    
  var products1 = [];
  $scope.allproducts = []; 
  var apcount = 0;
  if($scope.categories != undefined)
  {
        for(i=0;i<$scope.categories.length;i++)
        {
          if($scope.categories[i] != undefined)
          {
            $scope.pcategoryid = $scope.categories[i].id;
            $http.get("db/getsubcategoryid.php",{
                params : {
                    'pcategoryid' : $scope.pcategoryid
                }
            }).then(function(resp){
                $scope.subcategories = resp.data;
                for(j=0;j<=i;j++)
                {
                  if($scope.subcategories[j] != undefined)
                  {
                    $scope.categoryid = $scope.subcategories[j].categoryid;
                    $scope.subcategoryid = $scope.subcategories[j].id;
                    if($scope.subcategoryid != 0)
                    {
                    $http.get("db/getproducts.php", {
                        params : {
                            'pcategoryid' : $scope.categoryid,
                            'subcategoryid' : $scope.subcategoryid
                        }
                    }).then(function(resp){
                        $scope.products = resp.data;
                        pcount++;
                        for(var m=0; m<=pcount; m++){
                            if($scope.products[m] != undefined)
                            {
                                $scope.allproducts.push($scope.products[m]);
                                apcount += 1;                           
                            }
                        }
                    $scope.productload =false;
                    });
                    }
                  }
                }
            });
          }
        }
    }
    var x = $scope.allproducts.length;
    var n = 0;
    for(n=0;n<=x;n++)
    {
        if($scope.allproducts[n] != undefined)
        {
            for(p=n;p<=x;p++)
            {
                if($scope.allproducts[n].categoryid == $scope.allproducts[p])
                {

   $scope.allproducts[n].productname.push($scope.allproducts[p].productname);
                }
            }
        }
        n++;
    }
};

我的php代码

<?php
     $con = mysql_connect("localhost","root","");
     mysql_select_db("cart",$con);
    if ($con) {
        $sql = mysql_query("select * from defaultproductimage where 
     categoryid='" . $_GET["pcategoryid"] . "' and 
   subcategoryid='" . $_GET["subcategoryid"] . "'", $con);
    for(;$row = mysql_fetch_array($sql);)
    {
        $sql1 = mysql_query("select * from subcategories where id='" .     
 $_GET["subcategoryid"] . "'", $con);
        for(;$row1 = mysql_fetch_array($sql1);)
        {
            $row["subcategoryid"] = $row1["subcategory"]; 
            $sql2 = mysql_query("select * from categories where id='" . 
$_GET["pcategoryid"] . "'", $con);
            for(;$row2 = mysql_fetch_array($sql2);)
            {
                $row["categoryid"] = $row2["category"];
                $data[] = $row;
            }
        }
    }   
    echo json_encode($data);
} 
else{
    die("Connection error: " . mysql_connect_error());
}
?>

我的html代码

<div>
<div ng-controller=productsview>
<div class=container-fluid>
 <div ng-init=getcategory()>
    </div>
<div class=container-fluid>
    <div ng-show=productload><p align=center>Getting Products<br><img 
src=images/pageload.gif width=100px height=100px></p></div> 
    <div ng-hide=productload class=row ng-repeat="productview in 
allproducts track by $index" style=padding:20px>
        <div class=col-md-9>
            <p><h5>{{productview.categoryid}}</h5></p>
        </div>
        <div class="col-md-3">
            <p align=right><button ng-click=getitems(productview) 
class="btn pbutton" style=background-color:white;box-shadow:none><font 
color=blue>Get more items</font></button></p>
        </div>
        <div class="col-md-2 cardheight">
            <div class="card card1">
                <img src="images/{{productview.productimage}}">
                <p>{{productview.productname}}</p>
            </div>