以角度過濾對象

我有一個顯示客戶健康歷史的應用程序，其中每個插入都有一個ID。看起來是這樣的：以角度過濾對象

我有一個搜索功能，在輸入文字時，我想使用的過濾器的ID

<input id="episode-id-input" placeholder="Search by episode ID..." type="text" class="validate" ng-model="vm.searchEpisodeById">

我的數據被加載的方式是這樣的顯示，通過ng-repeat：

<div ng-class="{ 
    'kept'  :person.pastAppointmentStatus == 'KEPT APPT.', 
    'cancelled':person.pastAppointmentStatus == 'CANCELLED', 
    }" class="past-appointments-meta-holder"> 


     <div class="meta-holder-title"> 
     <p class="meta-holder-title-name"> 
      {{person.activeReferralsType}} 
     </p> 
     <p class="meta-holder-title-date"> 
      {{person.activeReferralsDate| date:'MMMM dd, yyyy'}} | {{person.activeReferralsTime}} 
     </p> 
     <p class="meta-holder-title-status"> 
      {{person.pastAppointmentStatus}} 
     </p> 
     <p class="episode-id"> 
      EPISODE ID: {{person.episodeId}} 
     </p> 
     </div>

的對象看起來是這樣的：

, "historyContainer" : [ 
       { 
        "activeReferralsType" : "new patient diabetic eye exam" 
        , "episodeId" : "9876" 
        , "activeReferralsDate" : new Date('1998-10-19') 
        , "activeReferralsTime" : "2:00PM" 
        , "referredFromName" : "Karen Rush, MD" 
        , "referredFromAddressFacilityName" : "Random Family Practice" 
        , "referredFromAddressFacilityAddressLineOne" : "1108 Cedar Road" 
        , "referredFromAddressFacilityAddressLineTwo" : "Chesapeake" 

       } 
       ,{ 
        "activeReferralsType" : "new patient diabetic eye exam" 
        , "episodeId" : "87678678" 
        , "activeReferralsDate" : new Date('1998-10-19') 
        , "activeReferralsTime" : "2:00PM" 
        , "referredFromName" : "Karen Rush, MD" 
        , "referredFromAddressFacilityName" : "Random Family Practice" 
        , "referredFromAddressFacilityAddressLineOne" : "1108 Cedar Road" 
        , "referredFromAddressFacilityAddressLineTwo" : "Chesapeake" 

       } 
       ]

我從來沒有在之前的角度使用的過濾器功能，可能有人請告訴我，我怎麼會過濾ng-repeat它加載後，只顯示div S作用戶輸入的ID？

來源

2017-01-16 IWI

你可以做這樣的事情。完整的代碼請參考this fiddle。

<div class="meta-holder-title" ng-repeat="person in person | filter: { episodeId: searchEpisodeById }">

來源

2017-01-16 14:02:31 whyyie

這種方法的問題是，它也將過濾的activeReferralsType的基礎上，而不是僅僅過濾根據ids – madhur

@madhur我明白你的意思。爲了迎合這種情況，我已經更新了答案。 – whyyie

謝謝！它看起來是正確的，但是我得到錯誤「錯誤：[過濾器：notarray]預期的數組，但收到：0」，即使我們的對象是相同的... – IWI

你願意做這種方式，希望它有助於

function myCtrl($scope) { 
 
    $scope.persons = [ 
 
    {episodeId:1}, 
 
    {episodeId:2}, 
 
    {episodeId:3}, 
 
    {episodeId:4}, 
 
    {episodeId:5}, 
 
    {episodeId:6}, 
 
    {episodeId:7} 
 
    ]; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app > 
 
<div ng-controller="myCtrl"> 
 
    <input id="episode-id-input" placeholder="Search by episode ID..." type="text" class="validate" ng-model="search.episodeId"> 
 
    <div ng-repeat="person in persons| filter:search"> 
 
      <p class="episode-id"> 
 
      EPISODE ID: {{person.episodeId}} 
 
      </p> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-01-16 14:06:07 madhur

以角度過濾對象

回答

相關問題