jeudi 17 mars 2016

Advanced filtering with angular ng-repeat

I've got an ng-repeat looping over a response. Here's my controller code that fetches the object:

$http.get( "/get-calendar").success(function( data ) {
      $scope.launchesList = data;
      $(".calendar-results").html("<strong>" + data.length + "</strong> results");
    });

And my ng-repeat:

  tr(ng-repeat='detail in launchesList | affiliateFilter:affiliateNetworkList')

And here are my filters:

  .filter("affiliateFilter", function() {
    return function(items, search) {
      var results = [];
      if (!search) {
        return items;
      } else {
        for (var i = 0; i < items.length; i++) {
          for (var j = 0; j < search.length; j++) {
            if (items[i].affiliateNetwork === search[j].affiliateNetwork && search[j].selected === true) {
              results.push(items[i]);
            }
          }
        }
        return results;
      }
    }
  })
  .filter("angleFilter", function() {
    return function(items, search) {
      var resultsAngle = [];
      if (!search) {
        return items;
      } else {
        for (var i = 0; i < items.length; i++) {
          for (k = 0; k < items[i].angles.length; k++) {
            for (var j = 0; j < search.length; j++) {
              if (items[i].angles[k] === search[j].angle && search[j].selected === true) {
                resultsAngle.push(items[i]);
              }
            }
          }
        }
        return resultsAngle;
      }
    }
  })

And my affiliateNetworkList/angleList;

$scope.affiliateNetworkList = [
      {
        affiliateNetwork: "JVZoo",
        selected: true
      }, {
        affiliateNetwork: "WarriorPlus",
        selected: true
      }, {
        affiliateNetwork: "Clickbank",
        selected: true
      }, {
        affiliateNetwork: "Network",
        selected: true
      }, {
        affiliateNetwork: "Other",
        selected: true
      }
    ];

    $scope.anglesList = [
      {
        angle: "Affiliate Marketing",
        selected: true
      }, {
        angle: "Blogging",
        selected: true
      }, {
        angle: "CPA",
        selected: true
      }, {
        angle: "eCom",
        selected: true
      }, {
        angle: "Facebook",
        selected: true
      }, {
        angle: "List Building",
        selected: true
      }, {
        angle: "MMO",
        selected: true
      }, {
        angle: "Offline",
        selected: true
      }, {
        angle: "PLR",
        selected: true
      }, {
        angle: "PPC",
        selected: true
      }, {
        angle: "Social Media",
        selected: true
      }, {
        angle: "Software",
        selected: true
      }, {
        angle: "Traffic",
        selected: true
      }, {
        angle: "Video",
        selected: true
      }
    ];

And the view with the checkboxes/filters:

span(ng-repeat='network in affiliateNetworkList')
          input(type='checkbox', ng-model='network.selected')
          |  {{network.affiliateNetwork}}
          br
        hr
        h5.weight Angles
        span(ng-repeat='angle in anglesList')
          input(type='checkbox', ng-model='angle.selected')
          |  {{angle.angle}}
          br
        hr

So as this code is shown above, I have it working with the affiliateNetworkList. Basically, a list gets generated with checkboxes of all the affiliate networks inside the affiliateNetworklist, and as you check/uncheck them, it filters the result set in the ng-repeat based on what affiliate networks are left that are checked. The affiliateNetwork variable in launchesList, which is the object that is coming back from the server is a string, so this works. However, I'm trying to implement the same kind of sorting for the anglesList. The angles variable in launchesList is an array. So on the client, I'm generating a list of angles with checkboxes next to them, and I need to filter through the launchesList records based on the values that exist in the angles array. I'm stumped, though. When I add angleFilter:anglesList to the filter in the ng-repeat, I get angular.min.js:114 Error: [ngRepeat:dupes]. And I think this is because some mof the records do have the same values in the angle list as other records, but it has to be this way. I've tried to add track by details._id and many other track by things, but I get the same thing.




Aucun commentaire:

Enregistrer un commentaire