角度の選択オプションでテーブル情報を表示する方法は？

Question

私は角度とPHPでプロジェクトを構築しています。私は2つのテーブルを持っています：1つのテーブルストック。 2テーブル - Stock_catagory。私は外部キー "refer_catagory_id"を持っています。私はこのテーブルからすべての情報を取得し、どれだけの商品を合計して計算することができます。どのようにそれは "選択"オプションを持っています - 私は "カテゴリ"を選択した場合、それは私にすべての株式を特定のカテゴリに表示されますように？誰かが助けてくれますか？ これは私のコードです：

PHP：

<?php 
    header('Content-Type: text/html; charset=utf-8'); 
    $connection = mysqli_connect('localhost','root','','hamatkin'); 

    mysqli_query($connection,"SET character_set_client = utf8"); 
    mysqli_query($connection,"SET character_set_connection = utf8"); 
    mysqli_query($connection,"SET character_set_results = utf8"); 

    if(!$connection){ 
    die("couldnt connect".mysqli_error); 
    } 

    $query="SELECT `refer_category_id`, `stock_id`,`product_name`,`description`,`quantity` from stock, stock_category WHERE 
    `refer_category_id` = `refer_category_id` group by `stock_id` "; 
    $queryResult = $connection->query($query); 
    $queryResult2 = array(); 
    if($queryResult->num_rows>0){ 
    while($row = $queryResult->fetch_assoc()){ 
     $queryResult2[] = $row; 
    } 
    } 
    $queryResult3 = json_encode($queryResult2); 
    echo json_encode($queryResult3); 
?> 

コントローラー：

"use strict"; 
angular.module('dataSystem').controller('reportsCtrl', function ($scope, $route, $location, $http) { 
    $http({method:'GET', url:'api/reports-tab/stock-report.php/'}) 
     .then(function(response) { 
     var arr = JSON.parse(JSON.parse(response.data)); 
     $scope.stockReport = arr; 


     }) 

     .catch(function(err) { 
     console.log('err', err) 
     }) 

     $scope.total = 0; 
     $scope.setTotals = function(item){ 
      if (item){ 

       $scope.total += parseInt(item.quantity); 
       return $scope.total; 

      } 

     } 

}); 

HTML：

<div class="table-responsive"> 
<table class="customer-list table table-striped" > 
      <thead> 
       <tr > 
        <th class="Column-Header">קטגוריה</th> 
        <th class="Column-Header">קוד מוצר</th> 
        <th class="Column-Header">שם מוצר</th> 
        <th class="Column-Header">תיאור מוצר</th> 
        <th class="Column-Header">כמות במלאי</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="item in stockReport" ng-init="setTotals(item)"> 
        <td>{{item.refer_category_id}}</td> 
        <td>{{item.stock_id}}</td> 
        <td>{{item.product_name}}</td> 
        <td>{{item.description}}</td> 
        <td>{{item.quantity}}</td> 
       </tr> 
      </tbody> 
      <tfoot> 

       <tr class="bg-warning"> 
        <td><font size="6">סך הכל מוצרים במלאי:</font></td> 
        <td><font size="6">{{total}}</font></td> 
        <td></td> 
       </tr> 
      </tfoot> 
     </table> 
</div> 

Answer 1

の作業例：http://jsfiddle.net/Lvc0u55v/8363/

これは、余分なdbクエリを使用せずにクライアント側のフィルタリングのための私の提案です：

まず、カテゴリ名を取得するクエリを変更します。私は、データベース上のフィールドは、「カテゴリ名」であることを前提としています

$query="SELECT `category_name`, `refer_category_id`, `stock_id`,`product_name`,`description`,`quantity` from stock, stock_category WHERE `refer_category_id` = `refer_category_id` group by `stock_id` "; 

そして、カテゴリの選択ボックスを生成します。カテゴリ別のテーブル内のデータをフィルタリングする

<select ng-model="selectedcategory"> 
    <option value="">Select a Category</option> 
    <option ng-repeat="item in uniqueCats" value="{{item.refer_category_id}}">{{item.category_name}}</option> 
</select> 

使用NG-ショー：

<tr ng-repeat="item in stockReport" ng-show="item.refer_category_id == selectedcategory" ng-init="setTotals(item)"> 

を

最後に、このカテゴリの配列を作成するためのものです：

$scope.uniqueCats ={}; 
for(i = 0; i< $scope.stockReport.length; i++){ 
    $scope.uniqueCats[$scope.stockReport[i].refer_category_id] = $scope.stockReport[i]; 
    }