角にあるオブジェクトをフィルタリングする

Question

私は、顧客の病歴を示すアプリケーションを持っています。各挿入にはIDがあります。次のようになります。

私はあなたが入力すると、検索機能を、持っている

が、私は

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

私のデータがロードされる方法は、このようなものですIDによって表示フィルタを希望、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" 

       } 
       ] 

私は、前の角度でフィルタ機能を使用したことがない、誰かが持っている唯一のdiv秒を表示するには、それがロードされた後、私はng-repeatをフィルタリングする方法を私に示してください可能性ユーザーが入力したIDですか？

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>