Using a MultiSelect Dropdown check box to create an Angular Filter

Do you want to apply a filter on moduleName based on the value selected from a multi-select dropdown?

INFORMATION:

[
  {
    "_id": "59155aada593f4331499dd59",
    "uswin": "lovelje",
    "moduleName": "After Call Survey",
    "accessLevel": "Read Only",
    "reason": "A reason",
    "status": "PENDING",
    "date": 1493834611052,
    "notifierEmail": null,
    "__v": 0
  },
  // More data objects here
]

Filtered data:

[
  {
    "name": "After Call Survey",
    "show": false
  },
  // More filtered items listed here
]

JAVASCRIPT

$scope.moduleFilter=function(entry){
        $scope.checkedModules = $filter('filter')($scope.modules, {show: 'true'})
$scope.checkedModules=($scope.checkedModules.length===0?$scope.modules:$scope.checkedModules);

        return $scope.checkedModules;
            };

HTML

<div  ng-repeat="request in (filteredItems = ((requests.value) | filter: { 'moduleName': moduleFilter } ))" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 no-padding">

Please provide your input.

javascriptangularjs

Answer №1

Hey everyone, just wanted to share an update. I was able to solve the issue by implementing a custom filter called byModuleName.

<div ng-repeat="request in (filteredItems = ((requests.value) | byModuleName: modules))">

The modules object passed into the filter has the following structure:

[
  {
    "name": "After Call Survey",
    "show": false
  },
  {
    "name": "ANI Block",
    "show": false
  },
  {
    "name": "IMT",
    "show": false
  },
  {
    "name": "Messaging",
    "show": false
  },
  {
    "name": "Outbound",
    "show": false
  },
  {
    "name": "Vocab",
    "show": false
  }
]

Custom Filter: byModuleName

function byModuleName() {
  return function(requests, modules) {
    let checked = modules.filter(function filt(x){ 
        return x.show === true;
    });
    checked = (checked.length === 0 ? modules : checked);

    let filtered = [];
    requests.filter(function(items) {
      return checked.filter(function(filter) {
        if (items.moduleName === filter.name) {
          filtered.push(items);
        }
      })
    });
    return filtered;
  };
}

angular.module('vovApp')
  .filter("byModuleName", byModuleName);

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

AngularJS: The watch for the array is being triggered during the initial load even though the array is not being modified

<div class="category"> <div ng-dropdown-multiselect="" options="categories" selected-model="selectedCategories" extra-settings="categoriesSettings" translation-texts="customTexts"></div> </div> $ ...

javascriptangularjs

What is the best way to display hover-over text pop ups on menu list items in jsTreeR?

As a dedicated user of the jsTreeR package within Shiny, I have been exploring the functionality it offers. By executing the code below, users are presented with a draggable menu at the top, allowing them to drag items down to the designated list labeled " ...

javascriptrshinypopupjstreer

What are the key indicators to differentiate between JavaScript and CSS code within a string?

I am faced with the challenge of receiving strings of code through simple POST requests. I am seeking a smart method to differentiate between JavaScript and CSS scripts without executing the script itself. My confidence level in distinguishing them accurat ...

javascriptnode.js

Is it possible for me to open an object URL in Internet Explorer?

Using Blob and URL.createObjectURL(), I have obtained an "object URL" (blob:) for some binary PDF data. In Chrome and FireFox, when I add an <A/> link HTML element with the programmatically set href attribute as the object URL, clicking on the link ...

javascripthtmlinternet-explorer

Design an introduction page with a responsive layout

After deciding to create a portfolio website, I came across an example that I liked and decided to replicate its style. However, I encountered an issue with responsiveness. When you resize the window on my site (https://olaolu.dev), everything changes size ...

javascripthtmlcss

Is it necessary to include async/await in a method if there is already an await keyword where it is invoked?

Here are the two methods I have written in Typescript: async getCertURL(pol: string): Promise<string> { return await Api.getData(this.apiUrl + pol + this.certEndpoint, {timeout: 60000}).then( (response) => { return response.data.certUR ...

javascripttypescriptasync-await

Getting rid of the white corners on points using ThreeJS

MY CURRENT PROJECT My current project involves rendering circular points with varying vertex colors using a fragment shader. I am aiming for the points to behave like more performance-efficient spheres, especially when zoomed in for anti-aliasing. ISSUE ...

javascriptthree.js

Displaying the API request using the UseEffect API is not working upon the page

Sorry if this question has been asked before, but I’m really stuck on this small bug. I’m trying to display a collection of tweets from Firestore when the page loads, but currently it only works after a post request. Here’s my code: useEffect(() ...

javascriptreactjsfirebasegoogle-cloud-firestore

Connect external script actions to HTML elements within components

I'm attempting to incorporate an external script Within public/index.html <script src="https://embed.selly.gg"></script> An event should trigger when I click on a button with specific data attributes. Inside components/shop/ShopItem.js ...

javascriptreactjs

What is the process of changing the name of an object's key in JavaScript/Angular?

In my possession is an established entity, this.data = { "part": "aircraft", "subid": "wing", "information.data.keyword": "test", "fuel.keyword": "lt(6)" } My objective is to scrutinize each key and if the key includes .keyword, then eliminat ...

javascriptangularobject

Is it possible to compare every element in an array with one another using an asynchronous process in NodeJS?

I am currently utilizing Resemble.js for image comparison within my web application. I have an array of image URLs that I need to compare with each other in order to calculate a unique score for each image. For example: [url1, url2, url3, url4] The minimu ...

javascriptarraysnode.js

What is the best way to integrate an OpenSeadragon module into my Vue component?

I am working on incorporating an external JavaScript library, called "OpenSeadragon", into my Vue Component. The main challenge I'm facing is figuring out how to properly load this library in my Vue component. In the parent template, I have included ...

javascriptvue.jsvue-routeropenseadragon

Tips for managing numerous HTTP requests in Angular 6

I have a method that is trying to chain together 3 requests like this: showProfileDetails() { this.getUserInfo(this.currentUser.id).pipe( mergeMap(e => this.getAccounts(this.currentUser.id) ), mergeMap(e => this.getPayments ...

javascriptangulartypescriptrxjsobservable

The Vue.js input for checkboxes and radios fails to toggle when both :checked and @input or @click are used simultaneously

Check out this example on JSFiddle! <script src="https://unpkg.com/vue"></script> <div id="app"> <label> <input type="checkbox" name="demo" :checked="isChecked" @input=" ...

javascriptvue.jsfrontend

Difficulty with Ajax post function in CodeIgniter

I am currently working with CodeIgniter version 3.1. When attempting to use Ajax post, I encountered a 403 (Forbidden) error in the console. [POST http://localhost/test/post 403 (Forbidden)] HTML <div class="post"> <input type ...

javascriptphpjqueryajaxcodeigniter

Python and JavaScript fundamental interaction

My current setup involves having a local HTML page named leaflet.html, which is being shown in an embedded browser within a python-tkinter application. Within the leaflet.html file, there exists a straightforward JavaScript code snippet that includes a fu ...

javascriptpythonleaflet

Updating the forward slash and numerical values within javascript or jQuery

I looked through various resources but couldn't find a suitable solution for my issue. I have a URL string like: http://localhost:8888/mypage/post/1/ The post number can vary from 0-9. Now I need to modify that string by replacing "post/1/" with "ne ...

javascriptjquery

Comparing specific elements of my text with an array of objects

I am working on a feature for handling tags where I want to associate keywords with custom tags and return the appropriate tag based on the input. For Example: let title = "The sky is blue today" let arr = [{ 'The sky': ['sky', ...

javascriptnode.jsexpress

Setting Max or Min Date to Today for Date Input in Angular 2 and Ionic 2

<input class="alert-input date-input" #dob="ngModel" name="dob" max="2018-03-07" [(ngModel)]="leadDetail.dob" type="date"></div> Is there a way to dynamically set the max date to today instead of 2018-03-07? I have tried a couple of methods b ...

javascriptangulartypescriptionic2

The issue with the AngularJS filter seems to be arising specifically when applied to

My AngularJS filter isn't functioning properly when used with an Object. Here's the View: <input type="text" ng-model="searchKeyUser.$" placeholder="Search Keys" class="form-control"><br> <ul class="list-group"> <li cla ...

javascriptarraysangularjsfiltercakephp-2.0