AngularJSのフィルタで特定のテーブルを更新する

Question

タブまたはメニュー項目を選択して再ソートするテーブルがあります。

コンテキスト： テーブルにはSQL DB内のすべての「注文」が表示され、特定のエリアのタブをクリックすると、そのエリアの注文のみでテーブルが更新されます。

IF文をどういうわけか、またはwhileループを角度にすることはできますか？

現在、私はすでにフィルタリングしようとしていますが、これはphpのようなデータを取得します。

<?php 

header("Access-Control-Allow-Origin: *"); 
header("Content-Type: application/json; charset=UTF-8"); 
echo json_encode($data); 

// creates a connection to the mysql server 
require('connection.php'); 

$filterGeo = $filterSta = $filterNH = $filterNot = '%'; 

if (isset($_GET['filterGeo'])) {$filterGeo = $_GET['filterGeo'];}; 
if (isset($_GET['filterSta'])) {$filterSta = $_GET['filterSta'];}; 
if (isset($_GET['filterNH'])) {$filterNH = $_GET['filterNH'];}; 
if (isset($_GET['filterNot'])) {$filterNot = $_GET['filterNot'];}; 


$result = $conn->query("SELECT * FROM orders 
    Where address LIKE '%$filterGeo%' AND status LIKE '%$filterSta%'"); 

$outp = ""; 
while($rs = $result->fetch_array(MYSQLI_ASSOC)) { 
    if ($outp != "") {$outp .= ",";} 
    $outp .= '{"orderID":"' . $rs["orderID"] . '",'; 
    $outp .= '"customerID":"' . $rs["customerID"] . '",'; 
    $outp .= '"date":"' . $rs["date"] . '",'; 
    $outp .= '"address":"'. $rs["address"] . '",'; 
    $outp .= '"area":"'. $rs["area"]  . '"}'; 
} 

$outp ='{"orders":['.$outp.']}'; 
$outp = utf8_encode($outp); 

$conn->close(); 
echo($outp); 

//?> 

JSONはこのような角度で処理されます。

<div ng-repeat="x in orders | filter:{area:'MyArea'}"> 

...

https://docs.angularjs.org/api/ng/filter/filter

Answer 1

を使用すると、結果セット（クライアントまたはサーバ側）をフィルタリングする場所に応じて、オプションのカップルを得ました。これで、フィルタリングに使用するスコープ変数を設定できます。

<li role="presentation"><a ng-click="areaFilter = 'Odder'">Odder</a></li> 

NGリピートでfilterで結果をフィルタリング：

<tr ng-repeat="x in orders | filter: {area: areaFilter}"> 

フィルタリングサーバ側：

をこの場合は、サーバーたびに新しいリクエストを行う必要があります新しいフィルタを適用します。セマンティクスは同じですが、この場合は文字列を変数に代入する代わりにng-clickの関数を呼び出します。

<li role="presentation"><a ng-click="filter('Odder')">Odder</a></li> 

コントローラー：

$scope.filter = function(val) { 
    // create the url you want to call depending on "val" 
    var url = '/filterOrders.php'; 
    switch (val) { 
     case 'Odder': 
      url += '?filterXY=Odder'; 
      break; 
     default: break; 
    } 
    $http.get(url) 
     .then(function (response) { 
      $scope.orders = response.data.orders; 
     }); 
    }); 
} 

Answer 2

：

var app = angular.module('Orders', []); app.controller('getOrders', function($scope, $http) { 
    $http.get("/filterOrders.php") 
    .then(function (response) {$scope.orders = response.data.orders;}); }); 

関連するHTMLスニペット角度のあるテーブルをフィルタリングするのは簡単です。

<li role="presentation"><a data-ng-click="areaFilter = 'Odder'">Odder</a></li> 

は、その後、あなたのNGリピートでフィルタを使用します：あなたのタブに、それがクリックされています変数を設定している

<tr ng-repeat="x in orders | filter: {area: areaFilter}"> 

はちょうどあなたがあなたのコントローラにareaFilter = ''を設定していることを確認してください、とあなたすべてのタブで同じ割り当てを使用する必要があります。

があなたのオプションにng-clickディレクティブを追加します。

フィルタリングクライアント側：

Answer 3

：あなたは、角度フィルタを使用することができ

<div ng-app="Orders" ng-controller="getOrders"> 

      <ul class="nav nav-tabs"> 
       <li role="presentation" class="active"><a href="#">Alle</a></li> 
       <li role="presentation"><a href="#">Odder</a></li> 
       <li role="presentation"><a href="#">Hørning</a></li> 
       <li role="presentation"><a href="#">Ry</a></li> 
       <li role="presentation"><a href="#">Skanderborg</a></li> 
      </ul> 
      <table class="table table-condensed table-border table-striped"> 
      <thead align="center"> 
       <th>Order #</th> 
       <th>Customer #</th> 
       <th>Address</th> 
       <th>Area</th> 
       <th>Date</th> 
       <th>OrderType</th> 
       <th>TrashcanType</th> 
       <th>Status</th> 
       <th>RenoNord Invoice</th> 
      </thead> 
      <tbody> 
       <tr ng-repeat="x in orders"> 
       <td>{{ x.orderID }}</td> 
       <td>{{ x.customerID }}</td> 
       <td>{{ x.address }}</td> 
       <td>{{ x.area }}</td> 
       <td>{{ x.date }}</td> 
       <td>{{ x.orderType }}</td> 
       <td>{{ x.trashcanType }}</td> 
       <td>{{ x.status }}</td> 
       <td>{{ x.renonord }}</td> 

       <td class="text-right"> 
        <button href="#" data-id="{{ x.orderID }}" class="btn btn-xs btn-default">Ret</button> 
        <button href="#" data-id="{{ x.orderID }}" class="btn btn-xs btn-danger">Slet</button> 
       </td>