So filtern Sie die Liste in AngularJS nach der Variablen

Question

Ich habe, was eine sehr einfache Aufgabe sein sollte. Ich möchte ein Dropdown-Menü im Winkel basierend auf einem bestimmten Parameter sortieren. Sollte einfach sein.

Ich mache einen Anruf zu einem Datendienst die Erträge einige Daten wie so:

"success" : true, 
    "data" : { 
     "this_status" : [{ 
       "DefNo" : "111*A", 
       "Com" : "111", 
}, { 
       "DefNo" : "222*B", 
       "Com" : "222", 
}, { 
       "DefNo" : "333*C", 
       "Com" : "333", 
} 
]; 
     "this_info" : [{ 
       "Req" : "MUST", 
       "DefCom" : "111", 
}, { 
       "Req" : "NoMUST", 
       "DefCom" : "222" 
}, { 
       "Req" : "MUST", 
       "DefCom" : "333" 
}]} 

Meine Aufgabe ist es, eine Liste mit allen Defcom Werte zu machen, die auch einen zugehörigen MUST Wert haben. Ich muss "DefCom" -Nummern mit einem "Req" auflisten, das innerhalb eines Dropdown-Menüs "MUSS" sein muss. Also in meinem Beispiel meine Drop-Down-Wert 111 haben würde und 333.

In meinem Controller, führe ich den Anruf

$scope.getDefCom = function(){ 
     MyAPIservice.getDefCom().success(function(response){ 
      $scope.info = response.data.this_info; 
      $scope.infoList = $scope.info; 
     }); 
     } 

Wo ich diese Fabrik:

angular.module('MyAPI.services', []) 
    .factory('MyAPIservice', function($http) { 
    var MyAPI = {}; 
    MyAPI.getDefCom = function() { 
     return $http({ 
      method: 'GET', 
      url: '/thisis/mylink/' 
     }); 
    }; 

    return invoiceheaderAPI; 
}); 

Das für meine Werke erste Initiative, machen Sie ein Dropdown, das DefCom-Nummern auflisten wird. Als nächstes muss ich sie jedoch filtern.

in diesem Beispiel.

Innerhalb meiner Vorlage:

<option ng-repeat="option in DefComList" value="{{option.DefCom}}">{{option.DefCom}} </option> 

Ich habe versucht, wie so ein Filter zu tun:

ng-repeat="option in DefComList | filter: {Req: $scope.require}" 

jedoch mehr Lesen auf ich konnte nichts finden, wo Sie einen $ scope Variable in eine einfügen Filter. Die meisten Vorschläge waren darauf ausgerichtet, einen eigenen Filter zu schreiben. Ich habe dies mit angular.forEach gemacht. Mein Filter ist unten:

$scope.filterDefs = function($scope) { 
     var clrreturn = false; 
     angular.forEach($scope.info, function(value, key) { 
      if (value.DefCom == $scope.require) 
       clrreturn = true; 

     }); 
     return clrreturn; 
    }; 

jedoch meine benutzerdefinierten Filter ausgeführt werden, bevor die Ergebnisse von $ scope.info aus der $ scope.getDefCom Funktion bekommen. Dies wirft eine Error: undefined is not an object (evaluating '$scope.info') bevor $ scope.info bereit ist. Ich weiß, dass dies mit Versprechungen zu tun hat, also habe ich versucht, aufgeschobene Versprechen zu schreiben. Das hat aber auch nicht funktioniert, und ich war frustriert, weil es so aussieht, als ob es eine sehr einfache Aufgabe sein sollte, und ich könnte es mir viel schwerer machen, als es sein sollte.

Answer 1

Ich fühle, dass Sie vielleicht darüber denken würden; Wenn ich zu verstehen, was Sie tun wollen, dann alles, was Sie in Ihrem Filter benötigen sollten, ist:

ng-repeat="option in DefComList | filter: require : true" 

Notiere die gilt für exakte Anpassung als Ihre Suche nach ‚MUST‘ auch ‚noMUST‘ passen würde.

Hier ist eine schnelle Geige ich für Sie zusammengestellt: https://jsfiddle.net/nqya24r4/

auch nur, wenn Sie speziell die Anf Immobilie suchen möchten, können Sie auswählen, ein Objekt anstelle einer Zeichenfolge verwendet wird. Hier ist eine andere Geige, die das demonstriert: https://jsfiddle.net/t3bw5L5d/2/

Ich hoffe, das hilft.