Choose all the items that are visible in the list using Angular

If you have the following ng-repeat:

<ul class="list-group">
    <ng-user-item
            ng-repeat="user in users | filter:search" user="user" ng-if="assigned.indexOf(user.id) < 0"
            ng-click="selectFunction(user);"></ng-user-item>
</ul>

As you can see, there is a filter applied.

When the filter is not null, I have a button displayed:

<button class="btn btn-default" ng-if="search.division != null" style="margin-bottom: 10px;">Select all</button>

When this button is clicked, I want to create a list of all visible ng-user-item.

How can this functionality be achieved using Angular?

Answer №1

In my opinion, updating your ng-repeat with the following code should solve the issue:

ng-repeat="user in filteredUsers = (users | filter:search)"

After making this change, you will be able to utilize filteredUsers as a regular scope variable.

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

Animating with jQuery to a specific offset or position

Currently, I am utilizing jQuery animate to modify the location of an element: $('#item').animate({'top' : '-50'}, 0); The goal is to set the position without any animations. I experimented with both offset and position, but ...

Information submitted through an ajax request does not get saved in the $_POST array

After successfully executing an AJAX request using GET, I decided to try POST this time. However, when attempting to send data, a baffling error message appeared in the console - NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED: 'JavaScript component does ...

Tracking the referral source when the email box is clicked

document.referrer is a JavaScript method that returns the URI of the page that linked to the current page. If the user navigated directly to the page, for example through a bookmark, the value returned by document.referrer will be an empty string. You can ...

The functionality of the String prototype is operational in web browsers, but it encounters issues

Version: 8.1.0 The prototype I am working with is as follows: String.prototype.toSlug = function () { return (<string>this) .trim() .toLowerCase() .replace(/\s+/g, '-') .replace(/[^\w\-]+/g, '') ...

Alerts are essential for the proper functioning of the AJAX function. Without them

As I incorporate a substantial amount of AJAX with XML Http Requests on my website, I encounter a peculiar issue with a few random AJAX calls. There seems to be an execution problem within my JavaScript code in the onreadystatechange function where certain ...

What is the name of the scrolling header effect achieved in the following?

I've been seeing a lot of people using a unique header effect lately and I'm curious to learn more about how it's done. Can anyone explain the process behind achieving this effect, what it's called, and if there are any good tutorials a ...

Leveraging JSON Data in Highcharts

I am looking to create a column range chart using Highcharts to display a series of high and low temperatures. I found a demo example that showcases the kind of chart I want on the Highcharts website at: The data I have is stored in a file named datatest. ...

execute field function prior to sorting

Currently, I am building a graphql server in express and using a resolver to modify my fields based on user input from the query. The issue arises from the transformer function returning a function. My goal is to sort the results by a field determined by ...

Navigation bar transforms color once a specific scroll position is reached

My website features a sleek navbar fixed to the top of the window. As users scroll past a specific div, the background color of the navbar changes seamlessly. This functionality has been working flawlessly for me thus far. However, upon adding anchor link ...

The chosen option in the q-select is extending beyond the boundaries of the input field

Here's the code snippet I used for the q-select element: <q-select square outlined fill-input standout="bg-grey-3 text-white" v-model="unit_selection" :options="units&qu ...

What could be causing my Chrome extension's AJAX calls to behave synchronously?

Recently, I've been experimenting with implementing AJAX in a Chrome extension. Within my content script, the goal is to inject some HTML into an existing page. I've attempted using JQuery.get, JQuery.load, and ng-include. To my surprise, all ...

What does dist entail?

I am currently utilizing gulp to create a distribution folder (dist) for my Angular application. After consolidating all the controllers/services JS files and CSS, I am now faced with handling the contents of the bower folder. In an attempt to concatenat ...

Parsing the CSV file contents according to the specified columns

Currently, I'm involved in a project using AngularJS where I need to extract data from a CSV file column by column using JavaScript. So far, I've successfully retrieved the CSV data and displayed it in the console. While I've managed to sepa ...

Rails - implementing ajax in partials causing an error: 'cannot find method render'

I am encountering an issue with my form partial located within a div that has the id "chapcomments". The form includes a submit button: <%= f.submit "Post", remote: true %> Within the correct view folder, I have a file named create.js.erb which con ...

Issue with alert not being triggered in browser when using HTML and JavaScript function

Just starting out with HTML and Javascript! I'm working on a simple program where users can input a card number, and the browser should indicate whether it is valid (between 13-16 digits) or not. The website looks great, but I'm not getting an ...

Nextjs optimizing page caching to reduce unnecessary rendering

Within my Next.js application, I have implemented two unique pages. Each page is designed to display a randomly selected person's name when the component is initially loaded. simpsons.tsx export default function Simpsons() { const [person, setPerso ...

Issues with the functionality of the directive's link feature

Today I am diving into the world of directives and came across the compile and link functions. However, I am encountering an issue with my link function that is not working as expected. Below is my code snippet: <body ng-app="myModule" ng-controller=" ...

I have a parent DIV with a child DIV, and I am looking to use jQuery to select the last child DIV. The parent DIV has an

In my HTML code, I have a parent div called "allcomments_4" which contains several child divs with unique IDs (oneEntry), each with their own children. My goal is to locate and retrieve the content inside the last child of the parent node (lastComment) and ...

JavaScript: retrieving undefined value from a text element

My goal is to retrieve the text entered into each textbox by querying and looping through their ID tags. However, when I attempt to print what I have retrieved, it always displays "undefined". Seems like your post consists mostly of code: </h ...

Bootstrap 4 Collapse - Ensuring that collapsed elements remain open when expanding other accordions

Can someone help me figure out how to keep an element open when another one is opened? Here is an example: https://getbootstrap.com/docs/4.0/components/collapse/ <div id="exampleAccordion" data-children=".item"> <div class="item"> & ...