Verwenden Sie NG-Repeat-Ausdruck als Filterwert

Question

Ich habe eine schöne Wiederholung, die eine Spalte enthält, die mit einem Fremdschlüsselelement verbunden ist, so dass es so aussieht, das mit einer Suche erweitert werden soll.

<input type="text" ng-model="search" placeholder="Search On Studio Name"> 

<div ng-repeat="cd in cds | filter : search"> 
<div>{{cd.colorcode;}}</div> 
<div>{{cd.studio[0].name}}</div> 
</div> 

Das Problem ist, ich habe nicht das gefilterte Ergebnis auf dem Studio-Namen erhalten, wenn ich versuche, als Beispiel hinzuzufügen:

| filter : search.{cd.studio[0].name} 

Wie nähere ich diese zweiten verbunden Fremdschlüsselspalt?

Als separate Frage möchte ich die Ergebnisse auch mit einem Klick als solcher (if/else) filtern, also wenn ich den Knopf drücke, bekomme ich alle "cd.studio [0] .name" direkt mit dem ersten Buchstaben A gefiltert, mit einem Knopf wie diese

<button ng-click="letter='[A]'">A</button> 
| filter : search.{cd.studio[0].name} OR letter: StartsWith 

Answer 1

Pass eine Prädikatfunktion zum Filter und implementieren dieses Prädikat Funktion in der Steuerung:

<div ng-repeat="cd in cds | filter : isAccepted"> 

$scope.isAccepted = function(cd) [ 
    return (cd.studio[0].name.toLowerCase().indexOf($scope.search.toLowerCase()) >= 0 || 
      ...); 
}; 

Answer 2

Sie die Filter verwenden sollten wie folgen:

<input type="text" ng-model="search.studio[0].name" placeholder="Search On Studio Name"> 

<div ng-repeat="cd in cds | filter : search"> 
    <div>{{cd.colorcode;}}</div> 
    <div>{{cd.studio[0].name}}</div> 
</div> 

und wenn Sie wollen, dies implementieren mit einem Tastenklick:

<input type="text" ng-model="originalSearch.studio[0].name" placeholder="Search On Studio Name"> 
<button ng-click="searchFunc()" > Search it!</button> 
<div ng-repeat="cd in cds | filter : finalSearch"> 
    <div>{{cd.colorcode;}}</div> 
    <div>{{cd.studio[0].name}}</div> 
</div> 

in Controller:

$scope.searchFunc = function(){ 
    $scope.finalSearch = $scope.originalSearch; 
}