Question

对于angularjs来说相当新，并且相当令人印象深刻，我已经用这个应用程序做到了这一点，感谢Stack社区。所以我有这个问题。我正在尝试创建正确的过滤器。

我的控制器有三件事，

它按字母顺序将数组拆分为组，并显示包含每个组的对象。
我还将其设置为使用new，all等过滤组...在视图中使用我的按钮上的指令。
现在我正在尝试使用ng-model创建一个过滤器，我被困在这里......

我当前版本过滤当前视图中的电子邮件，即（新的，全部等），这非常简单。

但是它不会过滤对象键，这意味着它不会过滤我创建的按字母顺序排列的索引键。
我宁愿让它搜索整个对象而不是它们所在的预过滤视图。所以基本上如果正在搜索我们希望它搜索所有内容。

我希望我能够很好地解释这一点。

以下是相关代码......

控制器：

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');              
         })
      }
   }
});

视图：

<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

对于第1点，您可以添加

ng-focus="filter_emails()"

在你的搜索输入框上，这样每次用户尝试搜索它时都会被带到＆＃34; All＆＃34;选项卡，然后搜索将在所有选项卡上工作。

对于第2点，您需要在每个项目上添加filterKey，因为有角度＆＃34;过滤＆＃34;仅适用于Array而不是对象。对于您可以执行以下操作的每个项目，过滤也适用于filterKey。（尝试过滤＆＃34; J＆＃34;在工作的plunker中）

item.filterKey = grp;

要删除您需要添加的密钥

ng-repeat="item in filtered = (value | filter : search | orderBy : 'sender_email')"

密钥上的

和ng-if="filtered.length>0"

更新了Plunker：https://plnkr.co/edit/kl7gYZkA6aCx0L2anO7q?p=preview

angularjs过滤ng-model键值

1 个答案: