Обновите данную таблицу с помощью фильтра в AngularJS

Question

Обновите данную таблицу с помощью фильтра в AngularJS

0

У меня есть таблица, которую я хочу переделать, выбрав вкладку или пункт меню.

Контекст: таблица заполняется всеми "заказами" в базе данных SQL, и, щелкнув вкладку для определенной области, она должна обновить таблицу заказами только в этой области.

Могу ли я сделать инструкцию IF каким-то образом, или while-loop в угловом?

В настоящее время он получает свои данные как это в 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:

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

NicklasN 18 май 2016, в 16:36

Источник

0

Можете ли вы добавить HTML часть?
John Smith 18 май 2016, в 14:04
0

Добавил это сейчас :)
NicklasN 18 май 2016, в 14:07
0

Итак, что я понимаю, теперь вы получаете все данные без фильтрации один раз, когда запускается контроллер, и когда вы щелкаете по любому из элементов li вы хотите добавить фильтр соответствующим образом, верно?
John Smith 18 май 2016, в 14:20
0

Да, точно, и обновите таблицу с этим фильтром
NicklasN 18 май 2016, в 14:24

Показать ещё 2 комментария

Теги:

php

mysql

javascript

angularjs

html5

3 ответа

1

Легко фильтровать таблицу в угловом режиме. На ваших вкладках установите переменную при ее нажатии:

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

Затем используйте фильтр в ng-repeat:

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

Просто убедитесь, что вы установили areaFilter = '' в свой контроллер, и ваша вкладка All должна использовать то же назначение.

aynber 18 май 2016, в 11:53

1

вы можете использовать угловые фильтры:

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

...

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

WalksAway 18 май 2016, в 11:24

Ещё вопросы

Итак, что я понимаю, теперь вы получаете все данные без фильтрации один раз, когда запускается контроллер, и когда вы щелкаете по любому из элементов li вы хотите добавить фильтр соответствующим образом, верно?
Да, точно, и обновите таблицу с этим фильтром

John Smith · Accepted Answer · 2016-05-18T12-20-00.000Z

В зависимости от того, где вы хотите отфильтровать результирующий набор (клиент или сервер), у вас есть несколько вариантов:

Фильтрация клиентской стороны:

Добавьте директиву ng-click в свои параметры. С этим вы можете установить переменную области видимости, которую вы будете использовать для фильтрации.

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

Фильтрация результатов с помощью filter в ng-repeat:

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