Question

我有一个应用程序，显示客户的健康历史记录，其中每个插入都有一个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，只显示输入ID的div用户？

Answer 1

你可以这样做。有关完整代码，请参阅this fiddle。

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

Answer 2

你想这样做，希望它有所帮助

＆＃13;

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

＆＃13;

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

＆＃13;

以角度过滤对象

2 个答案: