AngularJS Filter Issue

Question

I'm working on implementing pagination on a filtered list. I'd like that pagination to be updated based on the query or the category selected. I'm sure there is likely a much cleaner way to implement this using filters, can anyone help me out?

Here is the part from my view where this lives:

product.html

<tbody>
    <tr ng-repeat="product in filteredProducts | orderBy: 'Name' | filter:currentCategory() | filter:query" >
        <td>&nbsp;</td>
        <td>{{product.Name}}</td>

        <!-- using if to not display $0 if no value -->
        <td ng-if="product.Threehour">{{product.Threehour | currency}}</td>
        <td ng-if="!product.Threehour">&nbsp;</td>

        <td>{{product.Daily | currency}}</td>

        <!-- using if to not display $0 if no value -->
        <td ng-if="product.Weekly">{{product.Weekly | currency}}</td>
        <td ng-if="!product.Weekly">&nbsp;</td>

        <pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
    </tr>

    <tr>
        Items per page: {{itemsPerPage}}
        Page Count:  {{pageCount()}}
        Total Items: {{}}
    </tr>

</tbody>

Here's the controller:

main.js

app.controller('MainCtrl', function ($scope, $location, productsBase, servCategory, servEquipment, productsFactory, filterFilter, $anchorScroll ) {

  $scope.query = servEquipment.getEquip();

  $scope.setCurrentCategory = function(cat) {
    $scope.newCat = servCategory.setName(cat);
  };

  $scope.currentCategory = servCategory.getName;

  $scope.oneAtATime = true;

  // Pagination Logic

  $scope.products = productsFactory.query();

  $scope.itemsPerPage = 30;
  $scope.currentPage = 1;
  $scope.pageCount = function(){
    return Math.ceil($scope.products.length / $scope.itemsPerPage);
  };

  $scope.products.$promise.then(function () {
    $scope.totalItems = $scope.products.length;
    $scope.$watch('currentPage + itemsPerPage', function(term) {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
    end = begin + $scope.itemsPerPage;
    $scope.filtered = filterFilter($scope.products, term);
    $scope.filteredProducts = $scope.products.slice(begin, end);
  });
});

Finally, here are my services (for reference):

app.js

app.service('servCategory', function servCategory(){
  var catName = "";
  this.getName = function(){
    return catName;
  };

  this.setName = function (name){
    catName = name;
    return catName;
  };
});

app.service('servEquipment', function servEquipment(){
  var equipName = "";
  this.getEquip = function(){
    return equipName;
  };
  this.setEquip = function(name){
    equipName = name;
    return equipName;
  };
});

Answer 1 · 2015-11-28T05:40:16Z

November 28, 2015 5:40am

I'm not sure if you made any headway on this, but I've been having a lot of success with using the ui-bootstrap project with Angular - http://angular-ui.github.io/bootstrap/

There's a specific set of elements specifically to handle pagination, and you might find that useful. The documentation and examples aren't bad, and there's a lot of help available on Stackoverflow if you get stuck implementing something.

Welcome to the Treehouse Community

Looking to learn something new?

Matt Slawson

Matt Slawson

AngularJS Filter Issue

1 Answer

Steve Smith

Steve Smith