使用angularjs和php进行数据过滤和显示

Question

我想过滤显示数据并使用Angular Js和PHP在网页上显示。我正在添加我的代码。数据在页面加载时显示的位置以及无限滚动工作。

HTML

<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> 
 
\t 
 
\t 
 
<div class="filters"> \t 
 
<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 
 
\t \t 
 
<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>

JS

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

 
\t $scope.loadMore = function() { 
 
\t \t limit = limit+5; 
 
     /* var last = $scope.images[$scope.images.length - 1]; 
 
     for(var i = 1; i <= 12; i++) { 
 
      $scope.images.push(last + i); 
 
     }*/ 
 
\t \t $http.get("http://localhost/ang/mysql.php", {params: { id: ids, name:'john', email:'john@yopmail.com', limit:limit }}) 
 
\t \t \t .then(function (response) { 
 
\t \t \t \t $scope.names = response.data.records; 
 
\t \t \t console.log(JSON.stringify(response.data)); 
 
\t \t }); 
 
\t \t 
 
\t \t 
 
    }; 
 

 
});

如何应用过滤器？

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

Answer 1

下面是一个例子： 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; 
    } 
}); 

的核心思想是将每一个过滤器值绑定到开/关，然后检查以ng重复对象具有“开”值的至少一个。此过滤器接受属性名称和可能的过滤器数组作为参数。请看完整的例子（我已经修改了一下你的html，使它更加可视化 - 城市和州参数被添加）。