Filtering objects in angular

Question

I have an app that shows a customers health history, where each insertion has an ID. Looks like this:

I have a search feature, where as you type, i would like the filter the display by the IDs

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

The way my data gets loaded is like this, through an 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>

The Object looks like this:

, "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"

                }
              ]

I have never used a filter function in angular before, could someone please show me how I would filter the ng-repeat after it has loaded, to show only the divs that have the ID typed in by the user?

whyyie · Accepted Answer · 2017-01-16 14:14:08Z

2

You can do something like this. Refer to this fiddle for full code.

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

edited Jan 16, 2017 at 14:14

answered Jan 16, 2017 at 14:02

whyyie

8024 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

madhur Over a year ago

The problem with this approach is that it will also filter on basis of activeReferralsType rather than just filtering on basis of ids

whyyie Over a year ago

@madhur I got what you mean. I have updated the answer to cater for the situation.

IWI Over a year ago

Thanks! it looks to be correct, however i am getting the error "Error: [filter:notarray] Expected array but received: 0" even though our objects are the same...

IWI Over a year ago

I removed the "track by index" in the ng-repeat and it fixed the issue, but i need the index later on... do you know how to compensate?

madhur · Accepted Answer · 2017-01-16 14:06:07Z

0

You would like to do it this way, hope it helps

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>

answered Jan 16, 2017 at 14:06

madhur

1,0111 gold badge15 silver badges23 bronze badges

Collectives™ on Stack Overflow

Filtering objects in angular

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related