Conceal elements that don't match from an array using Angular

There is a search box containing an ng-model:

<input type="text" class="form-control" placeholder="Search" ng-model="searchLibrary.text">

Additionally, there is an ng-repeat utilizing a filter searchLibrary.text

<div ng-repeat="w in items | filter:searchLibrary.text" on-item-removed="onItemRemoved(item)">

Is it possible to hide non-matching elements instead of removing them when the user inputs text into the search box?

The issue with removing elements is that the callback method assigned to the ng-repeat gets triggered even when a user simply searches for an item.

Edit: All items in the items array are draggable, allowing users to manually move them from panel A to panel B. The callback should only be triggered when an item is actually removed, not when the user performs a search.

Any assistance would be greatly appreciated.

javascriptangularjsangular-filtersgridstack

Answer №1

To hide elements, you have the option to utilize either ng-if or ng-show. One way to achieve this is by replacing

<div ng-repeat="w in items | filter:searchLibrary.text" on-item-removed="onItemRemoved(item)">

with

<div ng-repeat="w in items" ng-if="w === searchLibrary.text" on-item-removed="onItemRemoved(item)">

For a practical demonstration, check out this CodePen example: https://codepen.io/anon/pen/VmPzMz

Answer №2

Another option is to utilize ng-class directive.

.is-hidden {
    display: none;
}

<div ng-repeat="w in items" ng-class="{'is-hidden': w===searchLibrary.text}"
    on item-removed="onItemRemoved(item)">

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

An error has occurred in nodejs: headers cannot be set after they have already been sent

I'm a newcomer to Node.js and encountering some challenges. Whenever I attempt to open 127.0.0.1:3000/bejelentkezes, I encounter the following error: POST /bejelentkezes 500 550.784 ms - 2259 GET /css/404.css 304 2.751 ms - - 1 Successful login Erro ...

javascriptnode.jsexpress

Easily transfer files without the need to refresh the page by utilizing the power of AJAX

In my page file-upload.jsp, I have the following code snippet: <form action="" id="frmupload" name="frmupload" method="post" enctype="multipart/form-data"> <input type="file" id="upload_file" name="upload_file" multiple="" /> <in ...

javascriptjqueryajax

Error: The javascript function is unable to execute because undefined is not recognized as a function

I've been struggling with an error in my "bubble sort" function that I wrote to organize a list of images. Whenever I run the function, I keep getting the message "Uncaught TypeError: undefined is not a function". Can anyone provide some guidance? $j ...

javascriptjquerytypeerror

Is it possible for an Ajax/jQuery script to display multiple dependent dropdown box options within a single Form URL?

In the process of developing a basic form prototype that includes 4 entries in PythonAnywhere (Python 3.7 + Django): PinID (Independent, simple manual number entry) Region (Independent Dropdown Box) Name (Region-Dependent Dropdown Box) Source (Name-Depen ...

javascriptpythonjquerydjangoajax

Each page in NextJS has a nearly identical JavaScript bundle size

After using NextJS for a considerable amount of time, I finally decided to take a closer look at the build folder and the console output when the build process is successful. To my surprise, I noticed something peculiar during one of these inspections. In ...

javascripttypescriptwebpackbabeljsnext.js

Is it necessary to close the navigation drawer after selecting an item?

Currently, I'm working on a project for my University where I am trying to incorporate a feature that will automatically close the navigation drawer whenever any of its items are clicked. However, I am facing some challenges figuring out how to achiev ...

javascriptvue.jsvuetify.js

Begin the animation again by hitting the start button, using the burst-engine and canvas

I have successfully created a simple animation using Burst Engine and HTML5. My goal is to make the start button trigger the animation to restart if pressed twice. Currently, when I press it, the animation just starts and nothing else happens. I suspect t ...

javascripthtmlcanvas

The header and sub-navigation are in disarray and require some help

Dear web experts, After six months of learning to code websites, I'm tackling a big project with some challenges. The recent changes to the header and subnav have thrown everything off balance, making it look wonky and not quite right. Specifically, ...

javascripthtmlcssheader

Exploring the dynamic duo of Github and vue.js

As I am new to programming and currently learning JavaScript and Vue.js, I have been trying to deploy my first Vue.js app without success. Despite spending hours on it, I still cannot figure it out and need to seek assistance. Every time I try to deploy, ...

javascriptvue.jsgithubdeploymentbuild

Implementing a Context Menu with a Single Click

I need assistance with creating a context menu that appears when the user clicks inside an HTML5 canvas. I want to have functions called when an item in the menu is selected. Can anyone provide guidance on how to achieve this? ...

javascriptjqueryhtml5-canvascontextmenu

Javascript function fails to run smoothly during rapidscrolling

I'm facing an issue with my JavaScript code that adjusts the transparency of the navigation bar while scrolling. It works perfectly when scrolling slowly, but when the scrolling speed is fast, it seems like the function is not triggered and the navbar ...

javascriptjquerybootstrap-4

Using a conditional statement to wrap a react Route

Currently, I am facing a challenge while working with react router. Initially, I had two distinct components being rendered under the same route - one with a parameter and one without (this was how the routes were distinguished). Now, my goal is to add opt ...

javascriptreactjsreact-routerreact-router-dom

Tips for handling errors when the ID parameter in the URL doesn't correspond to the ID in the database and redirecting to an error page

Utilizing a MERN stack application, I rely on the Axios library to facilitate communication between the client and server. An essential route '/blogs' is responsible for fetching all the blogs from the backend and presenting them on the interface ...

javascriptnode.jsreactjsmongodbmern

Getting the most out of your weather API: optimizing search parameters for precise location results and avoiding any confusion with similar locations

When experimenting with new platforms, I often utilize the openweathermap.org's api. However, I have encountered a recurring issue where I struggle to define a precise query for finding certain cities. The api functions smoothly for major cities like ...

javascriptjqueryajaxweather-api

The jquery UI button is displaying too wide even though the padding is set to zero

My goal is to decrease the width of certain jQuery buttons. Though I have attempted to eliminate padding using the code below, there remains a minimum of 5 pixels on either side of the text within my button. .button().css({ 'padding-left':' ...

javascriptjquerycssjquery-uibutton

What is the process for dynamically checking in a node in jstree?

I am utilizing Jstree from https://github.com/vakata/jstree. I have successfully loaded the tree structure, and now I want to bind checked checkboxes from an array of data. By default, the nodes have unique ids. I will check the id of each node in the arra ...

javascriptjqueryarrayscheckboxjstree

Setting a default value in react-select

Recently, I developed a react-select component that is compatible with redux-form. The SelectInput component looks like this: const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.on ...

javascriptreactjsreduxredux-formreact-select

Object Illumination Effect Using Three.js

Currently, I am working on creating an earth scene using Three.js and everything seems to be going well except for the large and distracting reflection disc that appears on the surface of the earth object. Does anyone have any suggestions on how to either ...

javascriptthree.js

How can I retrieve the array data that was sent as a Promise?

I have a database backend connected to mongoDB using mongoose. There is a controller that sends user data in a specific format: const db = require("../../auth/models"); const User = db.user const addProduct = (req, res) => { User.findOne({ ...

javascriptnode.jsreactjsmongodbexpress

Node.js request.url is returning incomplete URL

I am currently testing out the code snippet provided in a beginner's book on Node.js. var http = require("http"); var url = require("url"); function onRequest(request, response) { console.log("request URL is: " + request.url); var pathName ...

javascriptnode.js