anglejsとphpを使用したデータフィルタと表示

Question

Angular JsとPHPを使用してデータをフィルタリングしてWebページに表示したい。コードを追加しています。データがページの読み込みに表示され、無限のスクロールが行われる場所。

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を使用してデータを表示したり、Webページに表示したりする必要があります。コードを追加しています。データがページの読み込みや無限のスクロール作業に表示される場所ここ

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をより視覚的にするために少し修正しました - 都市と州のパラメータが追加されました）。