使用 AngularJS 中的过滤器更新给定表答案

【问题标题】：Update a given table with a filter in AngularJS使用 AngularJS 中的过滤器更新给定表
【发布时间】：2016-05-18 22:35:43
【问题描述】：

我有一张表，我想通过选择一个选项卡或菜单项对其进行重新排序。

上下文：该表填充了 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 是由这样的角度处理的；

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

相关的 HTML sn-p:

  <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>

【问题讨论】：

可以把html部分也加进去吗？
所以我的理解是，当控制器启动时，您现在无需过滤一次即可获得所有数据，当您单击任何 li 元素时，您希望相应地添加过滤器，对吧?
没错，用那个过滤器更新表格

标签： javascript php mysql angularjs html

【解决方案1】：

根据您要过滤结果集的位置（客户端或服务器端），您有几个选项：

过滤客户端：

将ng-click 指令添加到您的选项中。有了它，您可以设置一个用于过滤的范围变量。

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

在 ng-repeat 中使用 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;
        });
    });
}

【讨论】：

【解决方案2】：

你可以使用角度滤镜：

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

...

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

【讨论】：

【解决方案3】：

以角度过滤表格非常容易。在你的标签上，让它在被点击时设置一个变量：

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

然后在你的 ng-repeat 中使用过滤器：

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

只需确保您在控制器中设置了areaFilter = ''，并且您的“全部”选项卡应使用相同的分配。

【讨论】：