I want to filter displaying data and show on web page using Angular Js and PHP. I am adding my code bellow. Where data are displaying on page load and also infinite scroll work.
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> <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>
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;}); $scope.loadMore = function() { limit = limit+5; /* var last = $scope.images[$scope.images.length - 1]; for(var i = 1; i <= 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)); }); }; });
How to apply filters ?
I want to filter displaying data and show on web page using Angular Js and PHP. I am adding my code bellow. Where data are displaying on page load and also infinite scrol work.
Here is an example: 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;
}
});
The core idea is to bind every filter value to on/off and then check if object in ng-repeat has at least one of "on" values. This filter accepts property name and possible filters array as parameters. Please, see full example (I've modified your html a bit to make it more visual - city and state parameters were added).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.