複数のプロパティをどのように繰り返すのですか？

Question

私はAngularのドキュメンテーションからPlunkerに例を取り入れて、私がしようとしていることを簡単に実証しました。私が持っているのは、配列中のオブジェクトの一部としての名前とlastNameです。入力をフィルタリングし始めると、名前を入力した後に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> 

はPlunkerです：https://plnkr.co/edit/SS2X2ZmguxNxQ4Txz3BN

は、与えられた任意の助けを事前にありがとうございます。

EDIT：私は何を探していますが、私はジョン・ドウを入力した場合、結果は「結果が見つかりません」と言うではないだろうということです。私は1つのプロパティで入力している場合は正常に動作しますが、lastNameをやりはじめたら、結果は見つかりません。

Answer 1

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を更新しました：https://plnkr.co/edit/gocfrflA6VKUDBwBcYKK?p=preview

編集：あなたは、複数のフィールドの組み合わせを超える検索興味を持っているとして、あなたはカスタムフィルタ機能を実装する必要があります。

$scope.search = function (friend) { 
    var fullName = friend.name + ' ' + friend.lastName; 
    return !$scope.q || fullName.indexOf($scope.q) !== -1; 
}; 

と

<li class="animate-repeat" ng-repeat="friend in friends | filter: search"> 

私はこのaswellのためplunkrを作成しました：https://plnkr.co/edit/fr3XH3ghMw0hidceXDVx?p=preview

より良いアプローチは、カスタムフィルタを利用することだろう。 https://toddmotto.com/everything-about-custom-filters-in-angular-js/と別のアプローチでは

Answer 2

https://docs.angularjs.org/guide/filterは私があなたのケースでは、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> 

は今私のコントローラで私は右の私のコントローラにフィルタへのフルアクセスをしたように、私はこのアプローチを使用following-

$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); 
    } 
} 

としての機能を実装すると思います。ほとんどの場合、私はこのタイプのカスタマイズされたフィルタを複数回は必要としないので、私はむしろそれらを私のコントローラに入れたいと思います。

一つの小さなグリッチは、しかし、あなたはそれ以外の場合はReference Error

ていただきたい、コントローラのどこかに $scope.qを定義する必要が

https://plnkr.co/edit/7FTgkXOtldihFBy7cuSP?p=preview

UPDATE

@FrederikPrijckは偉大な例を通して私を導いすべてのダイジェストサイクルでこの関数を呼び出すことを排除する方法について説明します。私はそれを反映した私の答えを更新しました。別のもの私はあなたが複数の入力フィールドのための部屋を持たないように私は非常に広範なコントロールを必要とするが、複数のプロパティでフィルタリングする必要がある場合、または時には$broadcastに基づいてリストを更新する必要があった。この質問のような簡単なフィルタを使用する必要がある場合は、受け入れられた回答を使用してください。

Answer 3

 **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; 
      })