如何使用 AngularJS 和目录分页进行分类过滤
How to category filter with AngularJS and dir-pagination
我正在使用目录分页进行过滤和分页。我想用 href 过滤。
分页和过滤(搜索文本框)正在运行。但是我想要link多过滤类型。 link , 文本框 , 组合框等
在主控制中:
$scope.currentPage = 1;
$scope.pageSize = 10;
$http.get('admin/api/?s=getProducts&lang='+lang).success(
function(r){
$scope.products = r;
}
);
function productFilter($scope) {
$scope.pageChangeHandler = function(num) {
console.log('going to page ' + num);
};
}
在 Html 页中:
<div class="widget">
<h4>CATEGORIES</h4>
<div id="price-range">
<div class="padding-range"><div id="slider-range"></div></div>
<input type="text" style="background-color: #fff;border: 1px solid #D39797; width: 140px; height: 22px;" ng-model="searchProduct">
<a href="#" class="button light" style="margin:0;">Search</a>
</div>
<div class="clearfix"></div>
</div>
<!-- Categories -->
<nav class="widget" >
<h4>Product Categories</h4>
<ul class="categories" ng-repeat="category in categories">
<li><a href="#" ng-model="searchCategory = category.category" >{{category.category}}</a></li>
</ul>
</nav>
我使用 ng-click 事件添加了隐藏输入文本和更改值。输入将过滤目录分页。
<input type="hidden" ng-model="searchCategory" >
<!-- Categories -->
<nav class="widget" >
<h4>Product Categories</h4>
<ul class="categories" ng-repeat="category in categories">
<li><a href ng-click="getProducCategory().searchCategory=category.category" >{{category.category}}</a></li>
</ul>
</nav>
将 getProductCategory() 函数添加到 mainCtrl
$scope.getProducCategory = function() {
return $scope;
}
我正在使用目录分页进行过滤和分页。我想用 href 过滤。 分页和过滤(搜索文本框)正在运行。但是我想要link多过滤类型。 link , 文本框 , 组合框等
在主控制中:
$scope.currentPage = 1;
$scope.pageSize = 10;
$http.get('admin/api/?s=getProducts&lang='+lang).success(
function(r){
$scope.products = r;
}
);
function productFilter($scope) {
$scope.pageChangeHandler = function(num) {
console.log('going to page ' + num);
};
}
在 Html 页中:
<div class="widget">
<h4>CATEGORIES</h4>
<div id="price-range">
<div class="padding-range"><div id="slider-range"></div></div>
<input type="text" style="background-color: #fff;border: 1px solid #D39797; width: 140px; height: 22px;" ng-model="searchProduct">
<a href="#" class="button light" style="margin:0;">Search</a>
</div>
<div class="clearfix"></div>
</div>
<!-- Categories -->
<nav class="widget" >
<h4>Product Categories</h4>
<ul class="categories" ng-repeat="category in categories">
<li><a href="#" ng-model="searchCategory = category.category" >{{category.category}}</a></li>
</ul>
</nav>
我使用 ng-click 事件添加了隐藏输入文本和更改值。输入将过滤目录分页。
<input type="hidden" ng-model="searchCategory" >
<!-- Categories -->
<nav class="widget" >
<h4>Product Categories</h4>
<ul class="categories" ng-repeat="category in categories">
<li><a href ng-click="getProducCategory().searchCategory=category.category" >{{category.category}}</a></li>
</ul>
</nav>
将 getProductCategory() 函数添加到 mainCtrl
$scope.getProducCategory = function() {
return $scope;
}