anglejs filter ng-modelキー値

Question

anglejsにはかなり新しく、かなり感銘を受けました。だから私はこの問題があります。私は正しいフィルタを作成しようとしています。

私は三つのこと、

1. それはアルファベット順にグループに配列を分割し、ディスプレイの各グループをwithingオブジェクトをする私のコントローラを持っています。
2. 私はまた、ビュー内の私のボタンのディレクティブを使って、new、allなどでグループをフィルタリングするように設定しました。
3. 今、私は立ち往生午前NG-モデルを使用してフィルタを作成しようとしていますが、これは...

である私の現在のバージョンは、すなわち（新しい、すべて、など）現在のビューでメールをフィルタリングし、このかなりストレートでした。

1. しかし、私が作成したアルファベットのインデックスキーをフィルタリングしないという意味でオブジェクトキーはフィルタリングされません。

2. 私はむしろ、それらが入っているプリフィルタリングされたビューではなく、オブジェクト全体を検索したいと思います。基本的に検索している場合、すべてを検索します。

私はこれを十分に説明しました。

app.controller('emailController', function($scope, Emails) { 
    Emails.getItems().then(function(response) { 
     $scope.emails = response.data; 
     $scope.grouped = group($scope.emails); 

     function group(arr) { 
      var grouped = {}; 
      arr.forEach(item => { 
      var grp = item.sender_email[0] 
      grouped[grp] = grouped[grp] || []; 
      grouped[grp].push(item); 
      }) 
      return grouped; 
     } 

     function is_new(arr) { 
      return arr.filter(function(evl) { 
      return evl.is_new; 
      }); 
     } 

     function inbox(arr) { 
      return arr.filter(function(evl) { 
      return !evl.shielded; 
      }); 
     } 

     function shield(arr) { 
      return arr.filter(function(evl) { 
      return evl.shielded; 
      }); 
     } 

     $scope.filter_emails = function(category, element) { 
      if (category === "inbox") { 
       $scope.grouped = group(inbox($scope.emails)); 
      } else if (category === "shielded") { 
       $scope.grouped = group(shield($scope.emails)); 
      } else if (category === "new") { 
       $scope.grouped = group(is_new($scope.emails)); 
      } else { 
       $scope.grouped = group($scope.emails); 
      } 
     } 
    }) 
}); 

ディレクティブ：

app.directive('filterGroup', function() { 
    return { 
     scope: true, 
     link: function(scope, element, attrs) { 
     element.bind('click', function() { 
      element.parent().children().addClass('btn-outline-primary');    
      element.parent().children().removeClass('btn-primary'); 
      element.addClass('btn-primary'); 
      element.removeClass('btn-outline-primary');    
     }) 
     } 
    } 
}); 

ビュー：ここ

は、関連するコード...

コントローラで追加できる点1については

<div class="row"> 
    <div class="col-md-12 text-center mb-5"> 
     <div class="btn-group"> 
      <button class="btn btn-primary" ng-click="filter_emails()" filter-group><span class="ion-home mr-2"></span>All</button> 
      <button class="btn btn-outline-primary" ng-click="filter_emails('new')" filter-group><span class="ion-plus-circled mr-2"></span>New</button> 
      <button class="btn btn-outline-primary" ng-click="filter_emails('inbox')" filter-group><span class="ion-archive mr-2"></span>Inbox</button> 
      <button class="btn btn-outline-primary" ng-click="filter_emails('shielded')" filter-group><span class="ion-paper-airplane align-middle mr-2"></span>Shielded</button> 
     </div> 
    </div> 
</div> 
<div class="row justify-content-center"> 
    <div class="col-sm-6 mb-5"> 
     <input type="text" ng-model="search" class="form-control form-control-lg" placeholder="Type to search all emails"> 
    </div> 
</div> 
<div class="row" ng-repeat="(key, value) in grouped"> 
    <div class="col-sm-1"> 
     <h1 class="rolodex">{{key | uppercase}}</h1> 
    </div> 
    <div class="col-sm-11"> 
     <div class="row"> 
      <div class="col-sm-6 mb-3" ng-repeat="item in value | filter : search | orderBy : 'sender_email'"> 
       <div class="card"> 
        <div class="card-body row"> 
         <div class="col-sm-2" ng-switch on="item.favicon"> 
          <img class="list-favicon" ng-switch-when="null" ng-src="images/airplane.svg" title="Site Favicon" /> 
          <img class="list-favicon" ng-switch-default ng-src="{{item.favicon}}" title="Site Favicon" /> 
         </div> 
         <div class="col-sm-10"> 
          <span><strong>{{item.sender_email}}</strong></span> 
          <span class="float-right"><small><em>{{item.created | date:'medium'}}</em></small></span> 
          <br> 
          <span><a href="//{{item.email_domain}}" target="_blank">{{item.email_domain}}</a> 
          <br> 
          <span ng-switch on="item.sender_name"> 
           <span ng-switch-when="null"><small><em>Sender Name Unknown</em></small></span> 
           <span ng-switch-default><small><em>{{item.sender_name}}</em></small></span>  
          </span> 
         </div> 
        </div> 
        <div class="card-footer text-center"> 
         <div class="btn-group"> 
          <button class="btn btn-outline-secondary"><span class="ion-archive mr-2"></span>Move To Inbox</button> 
          <button class="btn btn-success"><span class="ion-paper-airplane align-middle mr-2"></span>Shielded</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

ng-focus="filter_emails()" 

あなたの検索入力ボックスでは、ユーザーが検索しようとするたびに「すべて」タブに移動し、すべてのタブで検索が行われます。

ポイント2の場合、角の "フィルタ"は配列のオブジェクトでのみ機能するため、ポイント2ではfilterKeyを各アイテムに追加する必要があります。各項目について、次の操作を行うことができ、フィルタリングはfilterKeyでも機能します。 https://plnkr.co/edit/kl7gYZkA6aCx0L2anO7q?p=preview