通过多列和多个值过滤angular js数组

filter angular js array by multiple columns and values

本文关键字：过滤 angular js 数组      更新时间：2023-09-26

我正在尝试使用多列过滤一个有角度的js数组。

例如|filter:｛sender:"fred"，receiver:"josh"｝| filter:{sender:‘josh’，receiveer:‘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/

我更喜欢在控制器中过滤消息。DOM过滤器可能会导致性能问题。请参阅：使用Controller$filter来防止$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>

相关文章：