按多列和值过滤角度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>