Using AngularJS to filter through multiple criteria within an ng-repeat loop

Question

Using AngularJS to filter through multiple criteria within an ng-repeat loop

I need to filter the messages data to exclude certain messages based on the userid. For example, in the scenario below, only messages from Paul (userid: 11) & Kate (userid:12) are displayed.

What I want to achieve is to filter out more than just one userid. For instance:

{userid:["!10", "!11"]};

This code should only display messages from userid 12 (in this case).

Check out the Plunker example: http://plnkr.co/edit/464FVab41YoV2BGFkgWt?p=preview

$scope.msgs = [{name:"John", userid:10, text:"Hello"}, {name:"Paul", userid:11, text:"hi"}, {name:"Kate", userid:12, text:"Hey"}];
$scope.filter = {userid:"!10"};

<div ng-repeat="msg in msgs | filter:filter">
   {{msg.name}} ({{msg.userid}}) : {{msg.text}}
</div>

javascript angularjs angularjs-ng-repeat angularjs-filter

Answer 1

Answer №1

You're halfway to the solution! Just add a filter to remove the unwanted user ids.

angular.module('app', [])
    .controller('mainCtrl', function($scope) {
        
        $scope.msgs = [
            {"name":"John", "userid":"10", "text":"Hello"},
            {"name":"Paul", "userid":"11", "text":"Hi"},
            {"name":"Pete", "userid":"12", "text":"'Allo"},
        ];
                  
        $scope.idsToTakeout = ['11', '12'];
        $scope.filterOutUserIds = function(i) {
            return ($scope.idsToTakeout.indexOf(i.userid) === -1);
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
<div ng-controller="mainCtrl">
<div ng-repeat="msg in msgs | filter:filterOutUserIds">
    id: {{ msg.userid }}, message: {{msg.text}}
</div>

</div>
</div>

I've also set up a plunker for you to check out.

Answer 2

You're halfway to the solution! Just add a filter to remove the unwanted user ids.

angular.module('app', [])
    .controller('mainCtrl', function($scope) {
        
        $scope.msgs = [
            {"name":"John", "userid":"10", "text":"Hello"},
            {"name":"Paul", "userid":"11", "text":"Hi"},
            {"name":"Pete", "userid":"12", "text":"'Allo"},
        ];
                  
        $scope.idsToTakeout = ['11', '12'];
        $scope.filterOutUserIds = function(i) {
            return ($scope.idsToTakeout.indexOf(i.userid) === -1);
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
<div ng-controller="mainCtrl">
<div ng-repeat="msg in msgs | filter:filterOutUserIds">
    id: {{ msg.userid }}, message: {{msg.text}}
</div>

</div>
</div>

I've also set up a plunker for you to check out.

Using AngularJS to filter through multiple criteria within an ng-repeat loop

Answer №1

Similar questions

What is preventing Facebook from merging its CSS/JS files together?

Adjust the minimum height and width when resizing the window

Combining arrays of objects in JavaScript

Generate a custom Elementor shortcode dynamically using JavaScript

Issue with Node.js MongoDb query results in the retrieval of all documents instead of the specific

The final output message from the NPM package is displayed right at the conclusion

Invalidating the express response object due to a TypeError issue

Receiving a blank string after calling fs.readFile within the chokidar.watch(path_file).on('change', ...) function

I am looking to transmit a JWT token to my backend using next-auth

Discovering child elements within an iframe using Angular and customizing their appearance

What is the best way to assign default values when destructuring interfaces within interfaces in TypeScript?

Using JavaScript to implement form authorization in ASP.NET Web API

Encountering an Error during the Installation of MapBox SDK in React Native

What is the best way to pass a file and a string to my C# backend using JQuery Ajax?

HTML - Automated Navigation to Anchor Links

The failure to build was due to the absence of the export of ParsedQs from express-serve-static-core

Using JavaScript to add a JSON string from a POST request to an already existing JSON file

Using JavaScript and jQuery, apply a class when a specific radio button is checked and the data attribute meets certain criteria

Swap the existing div with a fresh div using jQuery or JavaScript

Having difficulty implementing getJSON function in CodeIgniter framework