使用angularjs和php进行数据过滤和显示 - Data filter and display using angularjs and php

Data filter and display using angularjs and php

我想使用Angular Js和PHP过滤显示数据并在网页上显示。我在下面添加我的代码。其中数据显示在页面加载和无限滚动工作。

<div ng-app="myApp" ng-controller="customersCtrl">
 
<table infinite-scroll='loadMore()' infinite-scroll-distance='2'>
  <tr ng-repeat="x in names" >
    <td>{{ x.package_name}}</td>
    <td>{{ x.locality_city}}</td>
  </tr>
</table>
	
	
<div class="filters">	
<input type="checkbox" name="type" value="1" checked /> city 1
<input type="checkbox" name="type" value="2" /> city 2
<input type="checkbox" name="type" value="3" checked /> city 3
<input type="checkbox" name="type" value="4" /> city 4
		
<input type="checkbox" name="state" value="1" checked /> state 1
<input type="checkbox" name="state" value="2" /> state 2
<input type="checkbox" name="state" value="3" checked /> state 3
<input type="checkbox" name="state" value="4" /> state 4
</div>
 
</div>

var limit = 20;
var app = angular.module('myApp',['infinite-scroll']);
angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 250);
app.controller('customersCtrl', function($scope, $http) {
   $http.get("http://localhost/ang/mysql.php", {params: { id: ids, name:'john', email:'john@yopmail.com', limit:limit }}).then(function (response) { $scope.names = response.data.records;});
	$scope.loadMore = function() {
		limit = limit+5;
       /* var last = $scope.images[$scope.images.length - 1];
        for(var i = 1; i &lt;= 12; i++) {
            $scope.images.push(last + i);
        }*/
		$http.get("http://localhost/ang/mysql.php", {params: { id: ids, name:'john', email:'john@yopmail.com', limit:limit }})
			.then(function (response) { 
				$scope.names = response.data.records;
			console.log(JSON.stringify(response.data));
		});
		
		
    };
});

如何应用过滤器?

我想过滤显示数据，并使用Angular Js和PHP在网页上显示。我在下面添加我的代码。其中数据显示在页面加载和无限滚动工作

下面是一个例子:https://plnkr.co/edit/WMwuEOELjw1R4GpOYDoz?p=preview
app.filter('commonFilter', function() { return function(values, property, filterArray) { var onArray = []; angular.forEach(filterArray, function(filter) { if (filter.on) { onArray.push(filter.name); } }); var filterResult = []; angular.forEach(values, function(value) { if (onArray.indexOf(value[property]) !== -1) { filterResult.push(value); } }); return filterResult; } });
核心思想是将每个过滤器值绑定到on/off，然后检查ng-repeat中的对象是否至少有一个"on"值。此筛选器接受属性名称和可能的筛选器数组作为参数。请参阅完整的例子(我已经修改了你的html一点，使其更直观-城市和状态参数被添加)。