Using the OR operator in an Angular filter

How can I create a filter with a range slider that shows multiple categories when it's in a certain position?

I have tried using the code below to filter based on the range, but it only captures the first word after the OR operator. Can anyone provide assistance?

$scope.filterRange = filterRange;

function filterRange() {
    if (this.rangemodel == 1) {
        $scope.categoryfilter = 'web' || 'ecommerce '; // something like that!
    } else if(this.rangemodel == 2) {
        $scope.categoryfilter = 'branding' || 'video'; // something like that!
    };
};

<div ng-repeat="project in projects | filter: {category: categoryfilter}">

I have looked at other posts, but I'm still struggling to make this work. =(

Thanks to Daniel, here is the solution:

$scope.projects = [];

$scope.filterRange = filterRange; 

function filterRange() {
    if (this.rangemodel == 1) {
        $scope.categoryFilter = function(project) {
        if (project.category === 'institutional site' || project.category === 'ecommerce') {
            console.log('filtering');
            return project;      
            }
        };
    } else if (this.rangemodel == 2) {
        $scope.categoryFilter = function(project) {
        if (project.category === 'branding' || project.category === 'email marketing') {
            console.log('filtering');
            return project;      
            }
        };
    }
};

Answer №1

If you want to customize your filtering function, you can do so by creating a new filter function like this:

$scope.customFilter = function(item) {
    if (this.filterBy === 1) {
        if (item.type === 'A' || item.type === 'B') {
            return item;      
        }
    } else if (this.filterBy === 2) {
        if (item.type === 'C' || item.type === 'D') {
                return item;
            }
        }
    }
};

Once you have defined your custom filter function, you can use it in your HTML like this:

<div ng-repeat="item in items | filter: customFilter">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Performing HTTP requests within a forEach loop in Node.js

I have a collection of spreadsheets containing data that needs to be uploaded through an API. Once the data is extracted from the spreadsheet, I create individual objects and store them in an array. My initial approach involved iterating over this array, ...

How to choose the final option in a multiselect using AngularJS and md-options

Below is the code snippet in question: <md-select multiple ng-model="filtered" placeholder="Select a team member" ng-show="onTeam"> <md-option ng-value="opt.value" ng-repeat="opt in allowedStatuses" selected="{{ opt.value === opt.last ? &a ...

Utilize Vue to access and read a file stored in the current directory

I am attempting to retrieve data from a text file that is located in the same directory as my .vue file. Unfortunately, I am encountering an issue where the content of the text file is not being displayed in both Chrome and Firefox. Instead, I am seeing th ...

Duplicate entries in the angular-ui Calendar

I've implemented the Angular-UI calendar to showcase some events. My activity controller interacts with the backend service to fetch the data, which is then bound to the model. //activity controller $scope.events = []; Activities.get() ...

How to Showcase Images in an Ionic 2 App Using HTML Content

This amazing app was built with Ionic 2 technology. It leverages a REST API to retrieve data in JSON format. Interestingly, one of the fields sent from the server is HTML content. <div [innerHTML]="'<p>' + eventMoreDetails.DescriptionHt ...

What is the correct location for the webpack.config.js file within a React project?

I recently inherited a React project that I need to continue working on, but I have never used React before. I've been advised to use a web worker in the project and have found a tool that seems suitable for my needs: Worker Loader The suggested meth ...

Increase the value of count (an AJAX variable) by 4 upon clicking the button, then send it over to the PHP script

I'm facing an issue where my AJAX variable is only updating once by +4 each time a button is pressed. I need assistance on how to make it continuously work. index.php - AJAX <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.m ...

Managing post requests in node.js using busboy and then multer

I'm currently facing an issue with busboy (or multiparty) and multer while trying to parse my request. Initially, the request is received successfully using busboy, where I proceed to create a folder and update my database. However, when I attempt to ...

Tips for declaring a non-reactive instance property in Vue.js with TypeScript

I am currently in the process of transitioning my Vue.js components to TypeScript. In accordance with the recommendations provided in the documentation, I attempted to utilize Vue.extend() for my component implementation. The code snippet for my component ...

Using `window.location.href` will terminate any pending asynchronous calls to the API

Before all async calls to the API are completed, window.location.href is triggered when the code runs. Setting a breakpoint on the location resolves the issue. How can I ensure that all calls are finished before invoking window.location.href? Code: const ...

Setting up user roles using Firebase Auth in NextJS application

Seeking a solution to implement a multi-level role system for my blog website. Currently utilizing Firebase Auth for authentication with email/password, but all users have the same posting/editing access. Looking to differentiate between Admins, Moderators ...

Is it possible to assign multiple ID's to a variable in jQuery?

I am currently using a script for a slider known as Slicebox, and in order to have different image sizes for mobile and desktop views, I need to duplicate the feature on my website. Although it's not ideal, I really like this slider and want to explo ...

Handle errors originating from unsuccessful connections to a server named "Event" when using RxJS's fromEvent method

Using rxjs fromEvent to establish a connection with a named sse Event, I am looking to handle an Error in case of connection loss namedEvent() { try { const eventSource = new EventSource( 'adress' ); return fromEvent ...

Can input be masked by using an alternative placeholder?

Having no labels in my form, I want to utilize a different placeholder using Angular and Angular-UI-Utils-Mask: <div ng-controller="myController"> <input type="text" ng-model="date" ui-mask="99/99/9999" placeholder="Bi ...

"Can you explain the functioning of this Node.js middleware when it doesn't require any

Currently, I am utilizing a function created by another individual for express and passport, which defines the middleware in the following manner: function isLoggedIn(req, res, next) { if (req.isAuthenticated()){ return next(); } els ...

Utilizing AngularJS: Incorporate Controller from an external .js file

As a newcomer to AngularJS, I am using plnkr.co as a learning tool to understand how to work with angular. One challenge I am facing is registering a Controller that is stored in a separate .js file from where the module is initialized. Can someone explain ...

Can I restrict access to all routes except one in vue-router? Is this a safe practice? Should I explore alternative methods for achieving this?

I am looking to create an online exam consisting of 5 pages, each with a countdown timer set at 120 seconds and 4 questions on each page. Once the timer runs out, users will be automatically redirected to the next page, or they can manually click the "next ...

The angular application fails to load the page properly and keeps refreshing itself

I'm currently working on an Angular app that searches for a Github user based on their username and then displays the list of repositories. When a user clicks on a repo name, it should show the open issues and contributors associated with that reposit ...

Tips for displaying HTML5 validation messages when the input is changed

I am working on a form where I prefer not to submit it directly, as I am making an AJAX call instead. However, I still want the HTML5 validation messages to show up when an input field is left empty. I have managed to display the validation message when a ...

What is the best method for concealing a specific element on the screen using ReactJS?

I'm looking for a way to have text displayed on the screen that is only hidden when a button is pressed, but I'm struggling to figure it out. I had the idea of using useState in this way: const [textVisibility, setTextVisibility] = useState(true) ...