Reverse action on Angular checklist-model checkboxes

I have successfully implemented checklist-model.js for angular to select from a dynamically generated list of objects. However, I now need to create the functionality to move unchecked checkboxes into a new array (and remove them when checked again). Can anyone provide me with some guidance on how to achieve this?

Here is the HTML code:

<label>
    <input type="checkbox"
        ng-model="check_all_domains"
        ng-click="toggle_select_all()"/> all
</label>
<label ng-repeat="objects in objects_model">
    <input type="checkbox"
        checklist-model="objects_selected"
        checklist-value="objects"
        ng-checked="check_all_domains"/>
    {{objects.name}}
</label>

And here is the model setup:

$scope.objects_model = [
    {id : '1', name: 'name1'},
    {id : '2', name: 'name2'},
    {id : '3', name: 'name3'},
  ];
$scope.objects_selected = [];
$scope.check_all_domains = false;

$scope.toggle_select_all = function() {
    $scope.objects_selected = [];
};

Here is a screenshot demonstrating how it currently works:

And here is how I envision it working:

UPDATED: See the DEMO for the updated and functional version.

Answer №1

I encountered a similar issue with checklist-model but was able to come up with a workaround

While the solution may not be ideal, it does get the job done:

$scope.toggle_select_all = function() {
   $timeout(function() {
       $scope.check_all_domains = $scope.check_all_domains ? false : true;
   });

   if (!$scope.check_all_domains) {
      angular.copy($scope.objects_model, $scope.objects_selected);
   } else {
      angular.copy([], $scope.objects_selected);
   }
};

You can view this in action on Plunkr: http://plnkr.co/edit/CiXO1debaDkKPHPYKNfT?p=preview


I strongly recommend exploring other alternatives as it will eventually be beneficial.

In my case, I found success with this approach: http://jsfiddle.net/cjwprostar/M4vGj/6/ - Chris Waguespack

Source: https://groups.google.com/forum/#!topic/angular/KMS5hXn1OCI

Answer №2

Just made some updates to my demonstration in the original post, feel free to check out the revised version.

<label ng-repeat="items in items_model" class="test">
    <input type="checkbox" 
          checklist-model="selected_items" 
          checklist-value="items" />
    <i ng-class="{checked : all_checked, 
                unchecked : !all_checked, 
                fakecheck : all_checked}"></i>{{items.name}}
  </label>

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

Animate an svg icon to follow a designated path as the user scrolls

I am currently working on a project that involves animating a bee svg icon as the user scrolls through the website. The bee starts at the top and fills in a grey color line with pink as the user moves forward, and moves backward as the user scrolls back. Y ...

Configuring routes for Angular4 router is a vital step in creating a

Issue: I am currently setting up routes for my application, aiming to structure the URL as https://localhost:4200/hero=id, where the 'id' will be dynamically selected. However, this setup is not functioning as expected. If I attempt to use a URL ...

What is the process for configuring NextJS to recognize and handle multiple dynamic routes?

Utilizing NextJS for dynamic page creation, I have a file called [video].tsx This file generates dynamic pages with the following code: const Video = (props) => { const router = useRouter() const { video } = router.query const videoData = GeneralVi ...

Insert a new item into an existing list using jQuery

I am looking to enhance user experience by allowing them to easily add multiple sets of inputs with just one click. I have been experimenting with jQuery in order to dynamically insert a new row of input fields after the initial set. My current approach i ...

Tips for extracting a website's dynamic HTML content after AJAX modifications using Perl and Selenium

When dealing with websites that utilize Ajax or javascript to display data, I'm facing a challenge in saving this data using WWW::Selenium. Although my code successfully navigates through the webpage and interacts with the elements, I've encounte ...

Decline the input according to the percentage

After experimenting with the script, I discovered that it did not perform as expected (even though it works on Google Webapp's script HTML form). My goal is to invalidate an input if the Downpayment is less than 30% or more than 100% of the Price, in ...

Encountering a mongoose error when attempting to use the push()

var mongoose = require('mongoose'), Schema = mongoose.Schema, ObjectId = Schema.ObjectId; var SongSchema = new Schema({ name: {type: String, default: 'songname'}, link: {type: String, default: './data/train.mp3&a ...

Unexpected Outcome Arises When Applying Lodash's Debounce Function to Axios API Call

I keep encountering an issue with my app where it updates every time text is typed. I've implemented debounce on an axios request to queue them up until the timer runs out, then they all go at once. But I want to limit the requests to one per 10-secon ...

Three-handled slider

Just acquired a new slider component <input id="slider_price" type="text" class="span2" value="" data-slider-min="1000" data-slider-max="80000" data-slider-step="5" data-slider-value="[60000, 80000]"/> _ $('#slider_price').slider({ t ...

Installing npm without the need for Node.js can be achieved

Looking to set up an ASP.NET Core Web Application in Visual Studio 2015 and have plans to incorporate AngularJs2 with TypeScript editing. To make this work, I need to set up the npm Package Manager. Ideally, I want to install npm without node as I will n ...

Challenges with Asset Management in Vite Compilation Result

I'm encountering a problem with structuring assets in the output directory while utilizing Vite for my project. I have set up the output.assetFileNames option to categorize assets into subfolders based on their types (css, fonts, img, js), but it&apos ...

Consider yourself a module for npm, just like a node

I'm currently working on a Javascript project that has been released as a node module. In some parts of the source code, I have used relative paths to import other files within the project: // <this_module_path>/action/foo.js import execution f ...

Setting up angular-cli project for rc5- Step by step guide

Trying to integrate angular-cli with angular 2 rc5 but facing challenges: The issue of 'Promise' not being found After attempting to install 'npm install -g angular-cli@webpack', typings did not get installed, resulting in WebStorm un ...

Angular is reporting that the check-in component is nonexistent

I encountered an error in my Angular 8 application while working on a component. The error seems to be related to nested components within the main component. It appears that if the component is empty, the error will be shown, but if it's not null, th ...

The functionality of Jquery radio:checked is not behaving as desired

Currently, I am in the process of learning jquery. I have created a basic html file with some jquery validations, however, they are not functioning as expected. The main problem is: If I input my name first and then check the checkbox, everything works co ...

Enhanced User Experience Through Triggered Content Recommendations based on Scrolling Patterns

When a user scrolls beyond a certain point on a webpage, I would like a recommended content popup to slide out from the right side at the bottom of the page. An excellent example can be seen on USAToday where a blue recommended box appears as you scroll d ...

What is the best way to randomly display an image from a JavaScript array within an HTML document?

I currently have this code in my HTML and JavaScript files, but I am having trouble with displaying images without using a URL in the JavaScript file. The images are located in my project folder. However, when I open the HTML file, the images do not appear ...

Executing a function by clicking on an element with the `ng-click` directive within a Bootstrap modal

I'm working on an app that allows users to submit posts for review. When a user clicks the add post button, I have a Bootstrap modal pop up to confirm their choice. Within this modal, there is a "confirm" button that should trigger a function. Strang ...

The conceal feature doesn't appear to be functioning properly on jQuery Mobile

I am facing an issue with a small mobile app built using jQuery Mobile. Within a div, I have three buttons and other content. My goal is to hide these three buttons if the user's device is running on Windows (WP). The buttons are defined as follows: ...

The error message "UnhandledPromiseRejectionWarning: Error: ENOTEMPTY: directory not empty" typically occurs

Struggling to successfully run the build using npm run build. Encountering the following error: UnhandledPromiseRejectionWarning: Error: ENOTEMPTY: directory not empty, rmdir '/var/www/html/abhinav/png-react/png-compressor/build/static' ...