按多列和值過濾角度js數組

Question

我正在嘗試使用多列過濾一個有角度的 js 數組。

例如 | 過濾器：{發件人：'fred'，收件人：'josh'} | 過濾器：{發件人：'josh'，收件人：'fred'}

但它似乎不起作用，請在下面查看我的完整代碼

      <div ng-repeat="msg in messages | filter:{sender: 'fred', reciever: 'josh'} | filter:{sender: 'josh', reciever: 'fred'}">

      Sender : {{ msg.sender }} MSg : {{ msg.msg }} Reciever : {{ msg.reciever }}
      </div>

      </div>

      <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
          $scope.messages = [
      {sender:'fred', reciever:'josh', msg:'HI'},
      {sender:'josh', reciever:'fred', msg:'i DEY'}, 
      {sender:'fred', reciever:'josh', msg:'Hello'}
      ];
      });
      </script>

這是js小提琴https://jsfiddle.net/c8uvrbvj/

Answer 1

我更喜歡過濾控制器中的消息。 DOM 過濾器會導致性能問題。 請參閱： 使用控制器 $filters 來防止 $digest 性能問題

但這基本上有效：

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.messages = [ {sender:'fred', receiver:'josh', msg:'HI'}, {sender:'josh', receiver:'fred', msg:'i DEY'}, {sender:'josh', receiver:'racheal', msg:'hw re u2?'}, {sender:'barack', receiver:'angela', msg:'Dear'}, {sender:'fred', receiver:'josh', msg:'Hello'}, {sender:'angela', receiver:'barack', msg:'Moin'}, {sender:'josh', receiver:'racheal', msg:'hw re u?'} ]; }).filter('myfilter', function() { return function(input, filter) { return input.filter(function(e1){ return filter.find(function(e2) { return e1.sender === e2.sender && e1.receiver === e2.receiver; }); }); }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="msg in (messages | myfilter:[{sender: 'fred', receiver: 'josh'},{sender: 'josh', receiver: 'fred'}])"> Sender : {{ msg.sender }} MSg : {{ msg.msg }} Reciever : {{ msg.reciever }} </div> </div>

它遵循沒有 DOM 過濾的解決方案，我認為是一個更好的方法：

 var app = angular.module('myApp', []); function filter(input, filter) { return input.filter(function(e1){ return filter.find(function(e2) { return e1.sender === e2.sender && e1.receiver === e2.receiver; }); }); } app.controller('myCtrl', function($scope) { var messages = [ {sender:'fred', receiver:'josh', msg:'HI'}, {sender:'josh', receiver:'fred', msg:'i DEY'}, {sender:'josh', receiver:'racheal', msg:'hw re u2?'}, {sender:'barack', receiver:'angela', msg:'Dear'}, {sender:'fred', receiver:'josh', msg:'Hello'}, {sender:'angela', receiver:'barack', msg:'Moin'}, {sender:'josh', receiver:'racheal', msg:'hw re u?'} ]; var name1 = 'fred'; var name2 = 'josh'; var myFilter = [{sender: name1, receiver: name2},{sender: name2, receiver: name1}]; $scope.messages = filter(messages, myFilter); });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="msg in messages"> Sender : {{ msg.sender }} MSg : {{ msg.msg }} Reciever : {{ msg.reciever }} </div> </div>