Фильтрация объектов в угловом

Question

У меня есть приложение, которое показывает историю здоровья клиентов, где каждая вставка имеет идентификатор. Похоже, это:

У меня есть функция поиска, где, как вы печатаете, я хотел бы фильтр на дисплей по идентификатору

<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, которые имеют идентификатор, введенный пользователем?

Answer 1

Вы можете сделать что-то вроде этого. Обратитесь к this fiddle за полным кодом.

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

Answer 2

Вы хотели бы сделать это таким образом, надеюсь, что это помогает

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>