Tips for choosing exclusively the visible content in search outcome

I'm working on a project that involves managing elements with checkboxes. I recently added a "checkAll" button to help select all elements at once.

http://example.com/jsbin1 (edit)

Any tips on enhancing user interface and ensuring only visible elements are selected when clicking the "checkAll" button?

Here's my workflow:

  1. Add filter option (hide elements with display:none; shows list 2)
  2. Click on checkAll checkbox
  3. Clear filter
  4. View only checked items from list1

Here is a snippet of my HTML code:

<div ng-app="listsModule">
    <div ng-controller="listsController">
        <input type="text" id="filter_lists" ng-model="search" placeholder="Search a list">

        <table>
            <thead>
            <tr>
                <th><input type="checkbox" ng-model="checkAll"/></th>
                <th>List name</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="list in lists | filter:search | orderBy:'name'">
                <td><input type="checkbox" ng-model="list.isSelected" ng-checked="checkAll"></td>
                <td>{{ list.name }}</td>
                <td>{{ list.isSelected }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

And here is my JavaScript code:

var app = angular.module('listsModule', []);

app.controller('listsController', function ($scope) {
    $scope.lists = [
        {"id": 39, "name": "list1", "isSelected": false},
        {"id": 40, "name": "list2", "isSelected": false}
    ]
});

Answer №1

By adjusting how the list is filtered, you can gain access to the filtered list within your current scope. This allows you to retrieve your selected items from that specific filtered list. Implementing a watch on your checkAll function will enable you to toggle the selection of your filtered items.

HTML:

<div ng-app="listsModule">
    <div ng-controller="listsController">
        <input type="text" id="filter_lists" ng-model="search" placeholder="Search a list">

        <table>
            <thead>
            <tr>
                <th><input type="checkbox" ng-model="checkAll"/></th>
                <th>List name</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="list in filtered = (lists | filter:{name:search}) | orderBy:'name'">
                <td><input type="checkbox" ng-model="list.isSelected"></td>
                <td>{{ list.name }}</td>
                <td>{{ list.isSelected }}</td>
            </tr>
            </tbody>
        </table>
        <div>Selected:
            <div ng-repeat="list in filtered | filter:{isSelected:true} | orderBy:'name'">
                {{list.name}}
            </div>
        </div>
    </div>  
</div>

Javascript:

var app = angular.module("listsModule", []);

app.controller('listsController', ['$scope', function($scope) {
    $scope.lists = [
        {"id": 39, "name": "Fluffy", "isSelected": false},
        {"id": 40, "name": "Muffy", "isSelected": false},
        {"id": 41, "name": "Dingo Jr.", "isSelected": false},
        {"id": 42, "name": "Bertram", "isSelected": false}
    ];

    $scope.$watch('checkAll', function(newValue, oldValue) {
        if ($scope.filtered)
        for (i=0; i<$scope.filtered.length; i++) {
            $scope.filtered[i].isSelected = newValue;
        }
    });
}]);

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

Is it possible to utilize the expose method to retrieve additional reactive variables and computed properties similar to methods in Vue 3?

Switching my application from Vue 2 to Vue 3 has been quite a journey. I've utilized the Composition API to refactor my previous render function into the setup hook. One interesting discovery was the ability to expose methods using context.expose({}). ...

Warning: React Element creation caution with flow-router integration

Whenever I incorporate the following code into my Meteor app: Home = FlowRouter.route("/", { name: "App", action(params) { ReactLayout.render(App); } }); An error message pops up in the Chrome console: Warning: React.createElement: type shoul ...

How can I combine multiple styles using Material-UI themes in TypeScript?

There are two different styles implementations in my code. The first one is located in global.ts: const globalStyles = (theme: Theme) => { return { g: { marginRight: theme.spacing(40), }, } } export const mergedStyle = (params: any) ...

Displaying identical images repeatedly, alter just one using JQuery with each change

In the design, I have both gray and blue stars displayed multiple times on the page. What I'm trying to achieve is that when a user clicks on a gray star, it should switch to blue, and vice versa. However, the current issue I'm facing is that cli ...

Directing User to New Page After Account Creation

I have set up an asp registration page with a custom asp:CreateUserWizard feature. After the successful completion of registration (for example, RegisterUser_CreatedUser), I would like to redirect the user to another page such as a welcome screen. I also ...

Determining if a number exceeds 3 decimal points using AngularJS

I have encountered a problem where I need to determine if a value has more than three decimal places in AngularJS. Although I am familiar with checking if a value is a whole number or greater than zero, I am unsure how to perform this specific task. Below ...

Troubleshooting: jQuery AJAX Post - Issue with Greater than conditional not functioning as expected

Having an issue with a conditional in my code. Everything is functioning properly except for this specific line. <if condition="$show['member']"> <script type="text/javascript" > $(function() { $("#submitbutton$post[postid]").click(f ...

Having trouble accessing subcategories while using the Node.js request module to fetch JSON data from an API

I am facing a strange issue whereby I can successfully retrieve data from an API using Node.js and the request module. However, when I try to access a specific subcategory within the JSON data, the object returns as undefined. Below is the code snippet: ...

Having trouble reaching the JSON object beyond the scope of the AJAX success function

Having trouble accessing a JSON object outside of the AJAX success scope? Need to find a solution to this problem? Look no further! This is what was initially attempted: An approach that works but may not be suitable for your needs: $(' ...

Issues with the functioning of dynamic dropdown select feature in AngularJS

Exploring Angular, I aim to provide users with the ability to choose from 3 dropdown select menus. The third menu's content should dynamically adjust based on the selections made in the previous two menus. The HTML structure: // First dropdown menu, ...

Unable to execute standard JavaScript code in node.js using express.js

Currently, I'm in the process of learning express.js and I've come across this simple express code snippet: const express = require("express"); const bodyParser = require("body-parser"); const app = express(); const port = 3000; app.use(bodyPar ...

Dealing with TypeScript and the Mongoose loadClass problem

Working with Mongoose's class schemas has been very beneficial for me. Incorporating TypeScript into my Node project has enhanced the development process. I made sure to refer to Mongoose the Typescript way...? in order to ensure that my Model align ...

Is there a way to implement tooltips on an element that has text-ellipsis enabled?

I am facing an issue with displaying an account number that exceeds 100 characters. I need to restrict the display with overflow hidden while still being able to show the full account number using a tooltip. Below is the code snippet: <span class="tex ...

Retrieving Information from Website Database

My goal is to import data from a web query into Excel. However, I am facing a challenge with the IP address (e.g., 10.10.111.20) because it only displays page 1 with 20 rows of entry data. When I try to navigate to page 2 or beyond, the data does not updat ...

Save information entered into dynamically created input boxes in an array

I am currently working on a project to develop a website that generates timetables. However, I have encountered a roadblock in my progress. My issue lies in dynamically generating user-selected text boxes for subjects and faculties using a for loop. Unfor ...

The md-select component in AngularJS is not retrieving data from the controller as expected

I am struggling with my code that is not displaying options for md-select. This specific HTML page is not the main page of my project, but rather part of my first AngularJS application. As a newcomer to AngularJS, I would greatly appreciate any assistance. ...

Implementing AngularJS JQuery Datatables Directive for Displaying Multiple Data Tables within a Single View

I have successfully implemented the following directive: angular.module('myApp').directive('jqdatatable', function () { return { restrict: 'A', link: function (scope, element, attrs, ngModelCtrl) { ...

When using Vue, here's a trick to verify the presence of a value in a form even when the value attribute is

I am currently in the process of creating multiple forms and I need to verify if all input fields are filled out or not. Since I am utilizing data binding with the model, I am not using the value attribute. This means that when attempting to iterate throug ...

Tips for handling binary data retrieved from a SQL query (such as LONGBLOB type) in node.js

I am trying to send binary data to the client using node.js, but I have encountered a limitation where write can only send string or Buffer. How can I successfully send binary data to the client? dbconnect.selectBinary(conn,function(result) { //resul ...

Error: null does not have the property 'renderView' to be read

My goal is to set up a main page in React.js with two buttons: Option 1 and Option 2. Clicking on Option 1 should redirect the user to the Main1 page, while clicking on Option 2 should lead them to Main2. It seems straightforward, but I am encountering the ...