使用AngularJS中的筛选器更新给定的表
Update a given table with a filter in AngularJS
我有一个表,我想通过选择选项卡或菜单项来重新排序。
上下文:该表由SQL数据库中的所有"订单"填充,通过单击特定区域的选项卡,它应该只使用该区域中的订单更新该表。
我能以某种方式做一个IF语句吗,或者做一个有角度的while循环吗?
目前,它在php中获得这样的数据(我已经尝试过在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是这样由angular处理的;
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>
根据您想要过滤结果集的位置(客户端或服务器端),您有几个选项:
筛选客户端:
将ng-click
指令添加到选项中。有了这个,你可以设置一个范围变量,你可以用它来过滤。
<li role="presentation"><a ng-click="areaFilter = 'Odder'">Odder</a></li>
用filter
在ng重复中过滤结果:
<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;
});
});
}
您可以使用角度滤波器:
<div ng-repeat="x in orders | filter:{area:'MyArea'}">
...
https://docs.angularjs.org/api/ng/filter/filter
按角度过滤表格非常容易。在你的标签页上,让它在点击时设置一个变量:
<li role="presentation"><a data-ng-click="areaFilter = 'Odder'">Odder</a></li>
然后在你的ng重复中使用过滤器:
<tr ng-repeat="x in orders | filter: {area: areaFilter}">
只需确保在控制器中设置了areaFilter = ''
,并且"全部"选项卡应使用相同的赋值。
相关文章:
- Javascript循环不会自我更新
- 添加文字和评论功能更新Div
- AngularJS:ng之后,重复$scope值未按预期更新
- 如何通过数组更新角度子范围
- Ajax聊天消息重复而不仅仅是更新
- 通过CSV文件上载更新数据库表
- 平均值:无法将数据更新到数据库
- $rootScope未使用forEach进行更新
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- 使用AngularJS中的筛选器更新给定的表
- 将记录添加到交叉筛选器dosen't更新dc.js lineChart组
- 当服务属性更改时,角度筛选器不会更新
- 在 D3 中筛选 CSV 的多行.js并更新键盘输入的筛选器
- 当搜索筛选器值从javascript更改时,智能表不会更新
- ng重复计数-筛选器更新次数不超过一次
- JQuery没有't更新:动态添加元素的最后一个筛选器
- 如何使用自定义绑定更新/筛选基础可观察值
- 筛选我的数据库并更新下一个下拉框的下拉框
- 如何筛选数组并在同一数组中更新结果