如何在angular中使用select选项显示表信息 - how to show table information with select option in angular?

我正在用angular和php构建一个项目。我有两个表:1 table - Stock。2 table - Stock_category。在Stock table中，我有外键"refer_category_id"。我可以从这个表中检索所有信息，并计算我总共有多少个产品。我怎样才能使它有一个"Select"选项-这样，如果我选择"Category"，它会显示我在特定类别的所有库存?有人能帮帮我吗?这是我的代码:

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>

示例:http://jsfiddle.net/Lvc0u55v/8363/

所以这是我的建议客户端过滤没有任何额外的数据库查询:

首先，更改查询以获取类别名称。我假设数据库上的字段是"category_name":

$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-show按类别筛选表中的数据:

<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];
  }