如何重複多個屬性？

我已經採取了從角文檔的例子爲Plunker爲了什麼，我試圖做一個快速演示。我所擁有的是名稱和姓氏作爲數組中對象的一部分。當我開始過濾輸入時，它運行良好，直到我輸入名稱後纔開始輸入姓氏。我該如何去做，以便搜索結果將包括姓名和姓氏？我被困在這一點上，無法弄清楚這一點，所以我正在尋找一些幫助。如何重複多個屬性？

<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

感謝您提前給任何幫助。

編輯：我正在尋找的是，如果我要鍵入John Doe，結果不會說「找不到結果」。如果我在一個屬性中鍵入，它工作正常，但是一旦我開始執行lastName，就沒有找到結果。

來源

2017-03-17 pertrai1

要顯示姓氏，您可以完成與朋友的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">

我創建了一個plunkr這個藏漢：https://plnkr.co/edit/fr3XH3ghMw0hidceXDVx?p=preview

一個更好的辦法是使用定製的過濾器。請務必閱讀： https://toddmotto.com/everything-about-custom-filters-in-angular-js/和https://docs.angularjs.org/guide/filter

來源

2017-03-17 08:33:13

是的，但問題是，如果你鍵入John Doe，它說沒有結果？ – pertrai1

這是因爲搜索只搜索一個屬性。你的問題沒有包含任何與'name'和'lastName'搜索相關的內容。 –

這裏是搜索的兩個plunkr，我會更新我的答案：https://plnkr.co/edit/fr3XH3ghMw0hidceXDVx?p=preview –

-1

在另一種方法，我想修改它，我在你的情況下迭代，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.$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); 
    } 
}

所以，我已經就在我的控制器的完全訪問權限過濾器我用這個方法。大多數情況下，我需要這種類型的定製過濾器不超過一次，所以我寧願將它們放在我的控制器中。

一個很小的故障，雖然，你需要在控制器某處定義$scope.q，否則通過Reference Error

倒是

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

UPDATE

@FrederikPrijck引導我通過一個很好的例子關於如何消除在每個摘要循環中調用此函數。我已經更新了我的答案。另一件事是我使用這種方法時，我需要非常廣泛的控制我的過濾器，就像你沒有多輸入字段的空間，但你需要過濾多個屬性，或有時我需要更新基於$broadcast的列表。如果您需要使用類似這個問題的簡單過濾器，請使用接受的答案。

來源

2017-03-17 08:58:59 maksbd19

這看起來很有趣。在這個和我選擇的答案之間 - 只是想了解更多 - 有什麼不同？是否有任何類型的性能增益？最佳實踐？ – pertrai1

說實話，兩個答案几乎都是相同的。呃你接受過濾器的答案是在視圖中實現的，我只是把它拿到了控制器中。我只是希望我的觀點儘可能地乾淨。視圖僅供查看，這是最佳實踐，您應將業務邏輯放在控制器中。儘管這完全取決於你自己。 – maksbd19

在控制器中使用過濾器並不是一件壞事（如果正確實施，它甚至會對性能有更好的影響），但上述答案沒有描述實現該imho的正確方法。通常一個過濾器get被移動到控制器，以避免在每個摘要上運行它。使用這種方法仍會在每個摘要循環中觸發過濾器。基本上，只有當過濾器的任何驅動器使用'$ watch'進行更改時纔會觸發過濾器。除此之外，我不認爲在HTML中添加16個LOC來替換單個超級簡單的過濾器將被視爲「乾淨」。 –

-1

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

來源

2017-03-17 11:39:26

如何重複多個屬性？

回答

相關問題