Learn the process of updating an Array with a list of values based on checkbox selection and dynamic filtering using AngularJS

$scope.selectObjectType = function () {
    $scope.selected = []; // reset previous selection
     $scope.model.allItemsSelected = true; // all are selected by default unless...
     // If any object type is not checked, then uncheck the "allItemsSelected" checkbox
    for (var i = 0; i < $scope.model.objectTypes.length; i++) {
        if (!$scope.model.objectTypes[i].isChecked) { 
             //$scope.selected.splice($scope.model.objectTypes[i].value);
            $scope.model.allItemsSelected = false;
            return; 
        } else {
            if ($scope.selected.indexOf($scope.model.objectTypes[i].value) == -1) {
                $scope.selected.push($scope.model.objectTypes[i].value);
            }
        }
    }
};

 // Triggered when the checkbox "Show All" is checked
$scope.selectAll = function () {
    // Loop through all the object types and set their isChecked property accordingly
    for (var i = 0; i < $scope.model.objectTypes.length; i++) {
        $scope.model.objectTypes[i].isChecked = $scope.model.allItemsSelected;
    }
};

When I click on either "Show Activated" or "Show Inactivated" in the list, it adds to the array of selected items. However, if I click on "Show InActivated" first, it does not add to the array.

The same process applies when removing items from the selection.

I would appreciate any assistance in meeting this requirement.

Answer №1

Here is the code with modifications and comments for better understanding. You can view the updated version on Plunker.

 $scope.selectObjectType = function () {
      $scope.selected = []; // Reset selection
      $scope.model.allItemsSelected = true; // Assume all items are selected initially
     // If any object type is unchecked, uncheck the "allItemsSelected" checkbox
     for (var i = 0; i < $scope.model.objectTypes.length; i++) {
         if (!$scope.model.objectTypes[i].isChecked) { 
             //$scope.selected.splice($scope.model.objectTypes[i].value);
             $scope.model.allItemsSelected = false;
             // return; // Skipping further select/unselect actions
         } 
         else {
             if($scope.selected.indexOf($scope.model.objectTypes[i].value) == -1) {
                 $scope.selected.push($scope.model.objectTypes[i].value);
                }
         }

     }
 };

 // Execute when "Show All" checkbox is checked
 $scope.selectAll = function () {
     // Update isChecked property of all object types
     for (var i = 0; i < $scope.model.objectTypes.length; i++) {
         $scope.model.objectTypes[i].isChecked = $scope.model.allItemsSelected;
     }

     $scope.selectObjectType(); // Add everything to array after selecting all (optimizable)
};

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

Guide on retrieving the AWS IAM user in string/json format using STS GetCallerIdentity Caller JS/TS

I am attempting to retrieve the AWS IAM Arn user using the STS GetCallerIdentity API provided by Amazon. The following code successfully logs the correct data in the console. Nevertheless, I am encountering difficulty returning the data as a string or JSON ...

Positioning with Bootstrap CSS libraries

The text next to the logo in the navbar isn't aligning properly (refer to this link for the page -> ). Furthermore, the logo isn't positioning correctly either, and this issue is present in all the navbar codes. I'm utilizing CSS bootstr ...

Displaying data using JSON on a fabric.js canvas

I've been encountering some issues while attempting to store data in JSON and then reload it onto the canvas using fabric.js. My code is quite simple: canvas.add(new fabric.Rect({ width: 50, height: 50, fill: 'red', top: 100, left: 100 })); ...

Creating a sequence of lights that alternate between on and off

I need to dynamically manage 5 on/off lights using Angular. These lights are connected in parallel to a working slider, sharing the same scope. The logic is simple - when the slider is at position 3, lights 1, 2, and 3 should be ON, while lights 4 and 5 sh ...

Has the jQuery plugin object misplaced a variable?

I am in the process of developing a basic plugin using jQuery. My current approach involves creating private functions and storing variables within the jQuery object itself. (function($) { var somePrivateFn = function() { alert(this.x); } ...

Uploading a file to a URL using Node.js

Looking for a way to replicate the functionality of wget --post-file=foo.xpi http://localhost:8888/ in nodejs, while ensuring it's compatible across different platforms. In need of assistance to find a simple method for posting a zip file to a specif ...

Find the most accurate color name corresponding to a hexadecimal color code

When given a hex-value, I aim to find the closest matching color name. For instance, if the hex-color is #f00, the corresponding color name is red. '#ff0000' => 'red' '#000000' => 'black' '#ffff00' = ...

Ways to generate a unique random number from an Array without repetition using Javascript

Looking to retrieve a random number from an array of numbers known as cardNumbertemp. function shuffleCard(){ randomized = Math.floor(Math.random()*cardNumbertemp.length); for (var i = 0; i < cardNumbertemp.length; i++){ ...

A step-by-step guide on leveraging ethereumjs-tx within a web browser

Is it necessary to install npm ethereumjs-tx when utilizing the browser-based version downloaded directly from GitHub? If so, how can we incorporate the ethereumjs-tx module into our script file? It seems like these are two separate components based on ...

expanding animation featured on Wikipedia

Have you ever noticed that when you visit a Wikipedia page on Chrome and use the ctrl+scrollup or ctrl+scrolldown command, the page resizes in a smooth animation? Do you wonder how this effect is achieved? (Interestingly, in Firefox, only the links in th ...

Tips on utilizing setInterval in a Vue component

When defining the timer in each individual my-progress, I use it to update the value of view. However, the console shows that the value of the constant changes while the value of the view remains unchanged. How can I modify the timer to successfully change ...

Struggling to retrieve the value from ng-model?

Currently, I am utilizing this account due to being logged into Facebook on my other account and not having access to my phone for the verification code process. On another note, I am struggling to retrieve the value from an ng-model despite numerous atte ...

Send a response directly from a controller method in Express without using req and res

One of my methods updates data in Mongo, but I am facing a challenge with handling the response as the request never completes. This method will be used multiple times and does not have access to "req" and "res". Any suggestions on how to tackle this issue ...

Steps to develop a collaborative NPM package

I am currently in the process of developing an NPM package using Typescript that contains solely my type interfaces. At the moment, my project has the following folder structure: project │ index.ts │ └───types │ restaurant.ts │ ...

Issue with Jquery UI draggable positioning in a specific Reveal.js slide

While my jQuery draggable feature works flawlessly in a simple HTML page without the presence of reveal.js, I encounter an issue within my reveal.js presentation where I utilize embed=true [utilizing only a portion of the full page for each slide]. When i ...

Error: The system reference 'Sys' is not defined in ASP.NET

I am trying to implement ajax functionality on the ASP.NET platform. To achieve this, I am using ScriptManager in conjunction with jQuery, and adding the script after the "document is ready" event. $(document).ready(function () { // sync {{scopeN ...

React higher order component (HOC) DOM attributes are causing the error message 'Unknown event handler property' to be triggered

I recently created a Higher Order Component (HOC) using recompose, but I'm encountering a React Warning every time the props are passed down. Warning: Unknown event handler property `onSaveChanges`. It will be ignored. All my properties with a speci ...

Submitting a PDF document to the server with PHP Laravel through AJAX

Struggling to send a PDF file via AJAX to my server for handling by a PHP script in a Laravel project. The file doesn't seem to be making it to the server. Despite receiving a 200 response in the network, the server is returning 'file not presen ...

Positioning of dropdown in Material UI select component

Unfortunately, I am encountering an issue with the Menuprops attribute and cannot seem to adjust the position of the drop-down box. Despite following the instructions from other similar queries, the desired outcome remains unachieved. My goal is to have t ...

What is the best way to retrieve information from an API and save it in an array within a MongoDB schema?

My current challenge involves querying an API in node.js, storing the obtained data in an array, and then pushing that array to a MongoDB schema. However, I am encountering difficulties as I am receiving an 'unhandledpromiserejection' warning err ...