使用 NG-Repeat 表达式作为过滤器值

Question

我得到了一个很好的重复，其中包含一个与外键元素连接的列，因此它看起来像这样想要通过搜索进行扩展。

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

问题是当我尝试添加示例时，我没有得到工作室名称的过滤结果：

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

如何处理第二个连接的外键列？

作为一个单独的问题，我也想通过单击按钮（如果/否则）来过滤结果，所以如果我按下按钮，我将过滤掉所有的“cd.studio[0].name”直接用第一个字母A，用这样的按钮

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

Answer 1

将谓词函数传递给过滤器，并在控制器中实现该谓词函数：

<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

你应该使用如下过滤器：

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

如果您想通过单击按钮来实现这一点：

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

在控制器中：

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