Javascript 如何重复多个属性？

我已经将Angular文档中的示例应用到Plunker中，以快速演示我要做的事情。我拥有的是作为数组中对象的一部分的名称和姓氏。当我开始过滤输入时，它工作得很好，直到我在键入名称后开始键入lastName。我将如何获得它，以便搜索结果包括姓名和姓氏？我在这件事上被难住了，无法解决这个问题，所以我正在寻求一点帮助

<div ng-controller="repeatController">
  I have {{friends.length}} friends. They are:
  <input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />

  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
    <li class="animate-repeat" ng-if="results.length === 0">
      <strong>No results found...</strong>
    </li>
 </ul>
</div>

我有很多朋友。他们是：


[{{$index+1}}]{{friend.name}}谁是{{friend.age}岁。


未找到任何结果…

这是普朗克：

提前感谢您提供的任何帮助

---

编辑：我要找的是，如果我输入JohnDoe，结果不会说“找不到结果”。如果我输入一个属性，它可以正常工作，但是一旦我开始输入lastName，就找不到任何结果。

要显示lastName，您可以执行与使用朋友的

name

和

age

完全相同的操作

<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
      [{{$index + 1}}] {{friend.name}} {{friend.lastName}} who is {{friend.age}} years old.
</li>

及

我也为此创建了一个plunkr：

更好的方法是使用自定义过滤器。 请务必阅读：

---

在另一种方法中，我想修改我正在迭代的列表，

friends

<input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />
<ul class="example-animate-container">

    <!-- instead of using the list directly I'd like to call a function which would return me the filtered list, hence getFriends()-->

    <li class="animate-repeat" ng-repeat="friend in getFriends()">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
    <li class="animate-repeat" ng-if="getFriends().length === 0">
      <strong>No results found...</strong>
    </li>
</ul>

我使用这种方法，这样我就可以完全访问控制器中的过滤器。大多数情况下，我需要这种类型的定制过滤器不超过一次，所以我宁愿把它们放在我的控制器

不过有一个小问题，您需要在控制器中的某个地方定义

$scope.q

，否则它将通过

引用错误

更新

---

@FrederikPrijck指导我完成了一个关于如何在每个摘要周期中消除调用此函数的伟大示例。我更新了我的答案，反映了这一点。另一件事是，当我需要对过滤器进行非常广泛的控制时，我会使用这种方法，比如您没有空间容纳多个输入字段，但您需要按多个属性进行过滤，或者有时我需要根据

$broadcast

更新列表。如果您需要使用类似于此问题的简单过滤器，请使用已接受的答案

是的，但问题是如果你键入John Doe，它会说没有结果？那是因为搜索只搜索一个属性。你的问题没有包括任何与搜索

name

和

lastName

相关的内容。以下是搜索这两个方面的提示，我将更新我的答案：正是我需要的。谢谢你一直在那里帮助我。对最初的混乱感到抱歉。这看起来很有趣。这和我选择的答案——只是想了解更多——有什么区别？是否有任何类型的性能增益？最佳实践？老实说，两个答案几乎是一样的。Ih您接受的答案过滤器是在视图中实现的，我只是在控制器中删除了它。我只是希望我的观点尽可能清晰。视图仅用于查看，这是最佳实践，您应该将业务逻辑放在控制器中。虽然这完全取决于你自己。在控制器中使用过滤器并不是一件坏事（如果实现正确，甚至可以产生更好的性能影响），但上面的答案并没有描述实现imho的正确方法。通常，过滤器会移动到控制器，以避免在每个摘要上运行它。使用这种方法仍然会在每个摘要周期触发过滤器。基本上，仅当使用

$watch

更改了驱动过滤器的内容时，才需要触发过滤器。撇开这一点不谈，我不认为在html中添加16个LOC来替换一个超级简单的过滤器是“干净的”。我创建了一个plunkr来演示如何避免在每个摘要循环中执行它，但仍将逻辑移到控制器：注意：除非性能受到影响，否则我更喜欢我的答案。@FrederikPrijck感谢您的宝贵意见。实际上，我脑子里没有消化循环。我现在肯定会在我的项目中使用这个。。

        **Hey i have changed json object of $scope.friends**
     I have added one more key **fullName** now it will search on fullName

            angular.forEach($scope.friends,function(value,key)
           {
             value['fullName'] = value.name +" " + value.lastName;
            })

<input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />
<ul class="example-animate-container">

    <!-- instead of using the list directly I'd like to call a function which would return me the filtered list, hence getFriends()-->

    <li class="animate-repeat" ng-repeat="friend in getFriends()">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
    <li class="animate-repeat" ng-if="getFriends().length === 0">
      <strong>No results found...</strong>
    </li>
</ul>

$scope.$watch('q', function () {    
  $scope.getFriends = function(){
    var friends = $scope.friends;

    var params;

    if( $scope.q.indexOf(' ') > -1 ){
      var q = $scope.q.split(" ");
      params = {
        name: q[0],
        lastName: q[1]
      };
    }
    else{
      params = $scope.q;
    }

    // You can modify params for even more powerful filter... if you need actually...

    return $filter("filter")(friends, params);
  }
}

        **Hey i have changed json object of $scope.friends**
     I have added one more key **fullName** now it will search on fullName

            angular.forEach($scope.friends,function(value,key)
           {
             value['fullName'] = value.name +" " + value.lastName;
            })