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

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>

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

});

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.

</div>

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