2017-09-21 3 views
3

Wie erstellt man den folgenden Filter mit AngularJS?AngularJS-Filterliste basierend auf Array-Eigenschaften

Hier ist ein visual diagram explaining the question. Ich habe versucht, dies für eine Weile herauszufinden, und würde wirklich etwas Hilfe zu schätzen wissen.

Ich habe eine Liste von Unternehmen:

$scope.companies = [ 
        { 
         id:"company_01", 
         ratings: [ 5, 5, 5, 5, 0, 5, 4, 4, 1, 3, 0, 0 ] 
        }, 
        { 
         id:"company_02", 
         ratings: [ 5, 4, 5, 4, 0, 5, 4, 4, 1, 3, 0, 0 ] 
        } 
        ... 
        ]; 

wo jeder company eine Eigenschaft ratings genannt hat - eine Reihe von numerischen Werten (1-5), die Noten für einen bestimmten Satz von issues darstellen:

$scope.issues = [ 
        { 
        label:'Carbon Footprint', 
        selected: true, 
        value: 3 
        }, 

        ... 

        { 
        label:'Consumer Health', 
        selected: false, 
        value: null 
        }, 

        ... 

        { 
        label:'Employee Satisfaction', 
        selected: true, 
        value: 5 
        }, 

        ... 
       ]; 

Die Indizes $scope.companies[i].ratings entsprechen den Indizes $scope.issues.

Jede Ausgabe hat:

  • eine selected Eigenschaft, eine boolean von einer UI Checkbox getoggelt
  • eine value Eigenschaft, eine Zahl (1-5) durch einen UI Schieber eingestellt

Ich möchte $scope.companies basierend darauf filtern, ob company.ratings[i] >= issue[i].value für jeden ausgewählten issue[i]. Wenn ein issue nicht ausgewählt ist, sollte es den Filter nicht beeinflussen.

Eine verwandte Frage ist, was der beste Weg, auf Änderungen auf $scope.issues zu achten wäre. z.B. wenn ein Benutzer ein Problem auswählt/abweist oder einen Schieberegler anpasst.

Vielen Dank!

Antwort

0

Der Filter

Hier ist ein Filter, der die goodRatingsOnly$scope.companies Array auf dem Inhalt des $scope.issues Array basierte Filter. Bei mehreren Schleifen sucht es nach einem Grund, den Datensatz nicht zurückzugeben, d. H. Wenn eine schlechte Bewertung gefunden wird.

app.filter("goodRatingsOnly", function thisFilter() { 
    return function(companies, issues){ 
     return companies.filter(function(comp){ 
     var poorRatingFound = false; 
     issues.forEach(function(issue, i){ 
      if (issue.selected){ 
      if (!poorRatingFound){ 
       poorRatingFound = comp.ratings[i] < issue.value; 
       console.log(poorRatingFound); 
      } 
      } 
     }); 
     return !poorRatingFound; 
     }); 
    } 
    }); 

Probe Nutzungs

In der Steuerung:

$scope.filteredCompanies = $filter("goodRatingsOnly")($scope.companies, $scope.issues); 

Oder auf ng-repeat in der Ansicht:

ng-repeat="comp in companies | goodRatingsOnly: issues" 

Demo

CodePen: Using an array to filter another array in a custom filter

+0

vielen dank für die lösung! Hier ist ein Link zu einem Video davon in Aktion;) https://drive.google.com/file/d/0B9vFYPxUYlHYeXF0bGtSWFZKejA/view –

0

ich habe es geschafft, es auf diese Weise zu lösen.
nicht sicher, wie ideal eine Lösung es sein kann.

app.filter('issue', function($filter) { 

    return function(list, filterList) { 

    nullify(); 

    return $filter("filter")(list, function(listItem){ 
     if (listItem.ratings_ordered[0] >= filterList[0].value && 
      listItem.ratings_ordered[1] >= filterList[1].value && 
      listItem.ratings_ordered[2] >= filterList[2].value && 
      listItem.ratings_ordered[3] >= filterList[3].value && 
      listItem.ratings_ordered[4] >= filterList[4].value && 
      listItem.ratings_ordered[5] >= filterList[5].value && 
      listItem.ratings_ordered[6] >= filterList[6].value && 
      listItem.ratings_ordered[7] >= filterList[7].value && 
      listItem.ratings_ordered[8] >= filterList[8].value && 
      listItem.ratings_ordered[9] >= filterList[9].value && 
      listItem.ratings_ordered[10] >= filterList[10].value && 
      listItem.ratings_ordered[11] >= filterList[11].value 
    ) { 
     return listItem; 
     } 
    }); 

    function nullify() { 
    filterList.forEach(function(issue) { 
     if (!issue.selected) { 
     issue.value = null; 
     } 
    }); 
    } 

    } 
}); 

wo list = $scope.companies und filterList = $scope.issues.