i am trying to filter an angular js array using multiple columns .
eg | filter:{sender: 'fred', reciever: 'josh'} | filter:{sender: 'josh', reciever: 'fred'}
But it doesn't seem to work, please view my complete code below
<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>
Here is the js fiddle https://jsfiddle.net/c8uvrbvj/
I would prefer to filter the messages in the controller. DOM filters can cause performance problems. see: Using Controller $filters to prevent $digest performance issues
But this basically works:
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>
It follows a solution without DOM filtering, I think a better approach:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.