Use a expressão Repetição NG como valor de filtro - angularjs, pesquisa, angularjs-ng-repeat, angularjs-filter

Eu tenho uma boa repetição que contém uma coluna que está conectada com um elemento de chave estrangeira, então parece que deseja estender com uma pesquisa.

<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>

O problema é que não obtenho o resultado filtrado no nome do estúdio quando tento adicionar como exemplo:

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

Como faço para abordar esta segunda coluna de chave estrangeira conectada?

Como uma pergunta separada, gostaria de filtraros resultados também com um clique de botão como tal (if / else), portanto, se eu pressionar o botão, obterei todos os "cd.studio [0] .name" filtrados diretamente com a primeira letra A, com um botão como este

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

Respostas:

Passe uma função de predicado para o filtro e implemente esta função de predicado no controlador:

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

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

você deve usar o filtro como segue:

<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>

e se você quiser implementar isso com um clique de botão:

<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>

no controlador:

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