Unlocking the Power of AngularJS Filters with Arrays: A Complete Guide

How can I filter array values using AngularJS?

Here is my scenario:

Cuisines JSON: ["food", "Alcohol","Thai"]

Categories JSON: ["home", "office","school"]

Values with cuisines and categories:

[{
    "_id": "1",
    "businessTypeName": "Pizza Hut",
    "cus_name": ["food","Thai"],
    "cat_name": ["home", "school"]
}, {
    "_id": "2",
    "businessTypeName": "Chicken Hut",
    "cus_name":["Alcohol","Thai"],
    "cat_name": ["office", "home"]
}, {
    "_id": "3",
    "businessTypeName": "Fish Hut",
    "bussiness_url": "/dist/images/loop_image_sample_3.png",
    "cus_name": ["Thai"],
    "cat_name": ["office", "school"]
}]

The cuisines and categories are in checkboxes. When clicking on any checkbox, the selected values will be appended to {{selected}}.

My question is how to filter values from {{selected}} to display in the listing_loop div.

Check out my Plunker demo here

javascriptangularjsarrays

Answer №1

It seems like achieving this in pure HTML is not possible.

One workaround could be to implement a custom filtering function within the scope:

$scope.customFilter = function(value, index, array) {
      // Ensure that `value.id` is a string
      return ["food","Thai","Alcohol"].indexOf(value.id);
}

You can then use it in your HTML like this:

<div ng-repeat="set in get | filter:customFilter"></div>

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

VueJS modal displaying data acts strangely

While using vueJS and Laravel, I encountered an issue with my modal losing its shape when I tried to display data in it. Even duplicate forms failed to show the data correctly. This occurred when I clicked on a button to open the modal and show the data. ...

javascriptlaravelvue.jsbootstrap-4modal-dialog

Is there a way to have incoming messages automatically align to the left or right based on the sender, without using the float property?

I am currently working on a webpage where I want the messages sent by different users to appear in a yellow conversation window based on who sent them - user 1 or user 2. I want it to mimic the messaging layout commonly seen on phones, distinguishing betwe ...

javascripthtmlcss

Effortlessly retrieve elements by their IDs through inline function calls

I am curious to know why when inserting the id directly into the onclick function, the table is being called again? function See(table){ console.log(table); // how does the system automatically detect the element? } <table id='iamtable' b ...

javascript

The delimiting slash is absent between hosts and options

Hello there (I hope my English is not too bad)! Currently, I'm attempting to set up a basic database using MongoDB Atlas (the online alternative), but I am facing an issue at the very first step: connecting! Every time I try, I encounter the same err ...

javascriptnode.jsmongodb

Turn off Highlighting on a Website

I conducted an experiment similar to this: <div onclick="clickfunc(this)"> highlightME </div> <div> ooo blablabla highlightME ooo highlightME ooo highlightME ooo</div> <script language=javascript> function clickfunc(obj ...

javascripthtmlcss

The Angular HTML Autocomplete feature is not functioning as intended when hosted on a CDN in Chrome, despite setting it to "nope" or "off"

When setting Autocomplete to "nope" or "off" in my input box for surname, I'm still able to select from the autocomplete list. This issue occurs when accessing our Ui app through CDN at link [https:// Xyz. net], but works correctly when accessing it d ...

angularjsangularhtml

The ng-model remains empty even after the $parent has been defined

I've encountered an issue where assigning ng-model to a text area and an input does not update the models. It is mentioned that this could be due to using ng-if causing a different scope, and I should use $parent, but even that solution is not working ...

javascripthtmlangularjsionic-framework

How can I insert an HTML link in PHP when encountering a die condition?

I am seeking a way to incorporate this link using JavaScript onclick function without the need for a button, <a href="#bot" onclick="startApp('ur')" img src="urBtn.png" /a> Additionally, I want it to execute during a PHP POST action utili ...

javascriptphphtml

Aligning two separate divs within a parent container div

I'm seeking a solution to the following issue: I have a container div that adjusts its height and width based on a div/img inside it with dynamic height. Inside that container, I want to add another square div measuring 72x72px that will be centered ...

javascriptjqueryhtmlcss

Fixed positioning upon scrolling begins prior to reaching the uppermost point (top div)

Currently, I have implemented a feature where #filter (the white select list in my sidebar) becomes fixed when it reaches the top of the page and stays there while scrolling until it reaches the footer and is released. However, I encountered an issue wit ...

javascriptcsspositionfixed

The designated <input type=“text” maxlength=“4”> field must not include commas or periods when determining the character limit

In the input field, there are numbers and special characters like commas and dots. When calculating the maxLength of the field, I want to ignore special characters. I do not want to restrict special characters. The expected output should be: 1,234 (Total ...

javascripthtmlangularjstypescript

What is the best way to propagate a react component's props to options following an apollo-client mutation?

How can you effectively pass a react component's props to options after performing a mutation using apollo-client? I am currently utilizing react in conjunction with apollo-client. Within a specific component, I am executing a delete mutation and the ...

javascriptreactjsgraphqlapollo-client

What is the best way to save inputted names as properties of an object and assign the corresponding input values as the values of those properties?

I am searching for a way to dynamically build an object where each property corresponds to the name of an input field and the value of that property is the input's value. Here is the HTML structure: <form> <fieldset> ...

javascriptjquery

Having trouble receiving a callback after sending an AngularJS $http.post request

I am experiencing a problem with the success/fail handlers not being called when making an Angular $http.post request. The server side of my application is a .NET MVC controller, which successfully receives the file and functions correctly in that aspect. ...

.netangularjsasp.net-mvchttp-post

Tips for adding and executing animations in JavaScript/jQuery on your webpage

Within the code snippet given below, I am creating and appending two canvas tags to the body. The purpose of this animation is to draw a check mark. Upon loading the page, both canvas tags are added to the page; however, only one check mark is actually dra ...

javascriptjqueryhtmlcanvascss-animations

What sets apart Vue-Test-Utils' "mount" from "shallowMount"?

Just to clarify, my experience with Vue, JavaScript, and web frameworks is still pretty fresh. Currently, I am working on getting more familiar with basic unit and component testing using Jest and vue-test-utils. I have gone through the documentation for ...

javascriptvue.jsjestjsvue-test-utils

How do the authentication and authorization processes in my frontend connect with the backend of my API system?

Currently, my frontend is built with Vue while my backend relies on an express rest API that fetches data from mysql. My goal is to ensure security for both the frontend (specifically a login form) and backend API without limiting access solely to my front ...

javascriptnode.jsrestexpressauthentication

The JavaScript slideshow fails to display an image during one rotation

The slideshow displays a sequence of images from pic1.jpg to pic8.jpg, followed by a 4-second pause with no image, and then repeats starting again at pic1.jpg. I am looking to have it loop back to pic1.jpg immediately after displaying pic8.jpg. Below is t ...

javascripthtml

The file path selected in Internet Explorer's open file dialog box is not retained

Currently, my Uploadify setup allows users to upload files by selecting them through the open file dialog. However, I've noticed that Internet Explorer does not store the path once a file is selected and uploaded. This means that every time a user wan ...

javascriptjqueryhtmlinternet-exploreruploadify

Alternating the tooltip icon based on the field's condition

Looking for a way to create a tooltip for an input field that involves changing icons based on certain conditions. An example scenario is the password field in a registration form. Seeking advice on the best approach to achieve this. Currently, here' ...

javascriptreactjsreact-nativematerial-ui