Datenfilter und Anzeige mit angularjs und php

Question

Ich möchte die Anzeige von Daten und zeigen auf der Webseite mit Angular Js und PHP. Ich füge meinen Code unten hinzu. Wo Daten beim Laden der Seite angezeigt werden und auch unbegrenzte Scroll-Arbeit.

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

 
});

Wie man Filter anwendet?

Ich möchte die Anzeige von Daten filtern und auf der Webseite mit Angular Js und PHP zeigen. Ich füge meinen Code unten hinzu. Wo Daten beim Laden der Seite angezeigt werden und auch unbegrenzte Scroll-Arbeit. Hier

Answer 1

ist ein Beispiel: 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; 
    } 
}); 

Die Kernidee ist es, jeden Filterwert zu binden, um ein/aus und dann zu prüfen, ob Objekt in ng-repeat mindestens einen der „einem“ Wert hat. Dieser Filter akzeptiert den Eigenschaftsnamen und das mögliche Filter-Array als Parameter. Bitte sehen Sie sich das vollständige Beispiel an (Ich habe Ihren HTML-Code etwas geändert, um ihn optisch zu verbessern - Stadt- und Statusparameter wurden hinzugefügt).