How to programmatically unselect an ng-checkbox in AngularJS when it is removed from an array

Question

How to programmatically unselect an ng-checkbox in AngularJS when it is removed from an array

Utilizing checkboxes to gather values and store them in an array for dataset filtering purposes.

The objectives are as follows:

Show child filters when parent category is selected.
Unselect all children if parent is unselected (otherwise they will remain hidden but still selected)
Display active filters
Remove active filter on click (also uncheck corresponding checkbox programmatically).
Clear all filters and uncheck all checkboxes.

Present code provided below, see attached fiddle for more information.

$scope.IsChecked = false;
$scope.ActiveFilters = [];

$scope.clearFilters = function() {
    $scope.ActiveFilters = [];
};

$scope.ModifyFilter = function (IsChecked, Filter) {
    console.log(IsChecked);
  if (IsChecked) {
    $scope.ActiveFilters.push(Filter);
  }
  else {
    var indexz = $scope.ActiveFilters.indexOf(Filter);
    $scope.ActiveFilters.splice(indexz, 1);
  }
};

For a partially functional demo, check out the Fiddle here

-- EDIT --

Extra clarification: If a checkbox value is removed from the 'Active Filters' section by clicking on its name at the bottom of the fiddle, it does not result in unchecking the checkbox. The same issue occurs when using 'Clear Filters'.

javascript angularjs checkbox

Answer 1

Answer №1

The issue lies within your html bindings. Please share the code here so we can take a look. You are using the "IsChecked" variable, which is a local scope variable created for each iteration of the loop. You are not updating it in your script code.

Here is the updated html:

<body ng-app="DemoApp" ng-controller="DashboardCtrl"> 

    <div ng-repeat="group in Filters">

       <input type="checkbox" value="{{group.title}}" ng-model="CheckboxParent" />
           {{group.title}}

       <div ng-show="CheckboxParent" class="animate-show" ng-repeat="filter in group.filters">

           <input type="checkbox" class="filterChild" value="{{filter.name}}" ng-model="filter.checked" ng-change="ModifyFilter(filter.checked,filter)"/>
                {{filter.name}} 
       </div>
    </div>

    <div>
      <h4>Active Filters</h4>

        <p class="clear-filters" ng-click="clearFilters()">Clear Filters</p>
        <ul ng-repeat="activeFilter in ActiveFilters">
            <li ng-model="activeFilter.checked" ng-click="removeFilter(ModifyFilter(activeFilter.checked,activeFilter))">{{activeFilter.name}}</li>
        </ul>
    </div>

</body>

Updated script:

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

app.controller("DashboardCtrl", function($scope) {

    $scope.clearFilters = function() {
        angular.forEach($scope.Filters[0].filters, function(filter) {
          filter.checked = false;
        });
        $scope.ActiveFilters = [];
    };

    $scope.IsChecked = false;
    $scope.ActiveFilters = [];

    $scope.ModifyFilter = function (IsChecked, Filter) {
        console.log(IsChecked);
      if (IsChecked) {
        $scope.ActiveFilters.push(Filter);
      }
      else {
        var indexz = $scope.ActiveFilters.indexOf(Filter);
        $scope.ActiveFilters.splice(indexz, 1);
      }
    };


    $scope.Filters = 
         [
        {
            "title": "Equipment",
            "filters": [
                { name: "Rope", checked: false },
                { name: "Cables", checked: false },
                { name: "Dowel", checked: false },
                { name: "Ball", checked: false }
            ]
        }
    ];  
});

You can find my solution on js fiddle: JsFiddle

Answer 2

The issue lies within your html bindings. Please share the code here so we can take a look. You are using the "IsChecked" variable, which is a local scope variable created for each iteration of the loop. You are not updating it in your script code.

Here is the updated html:

<body ng-app="DemoApp" ng-controller="DashboardCtrl"> 

    <div ng-repeat="group in Filters">

       <input type="checkbox" value="{{group.title}}" ng-model="CheckboxParent" />
           {{group.title}}

       <div ng-show="CheckboxParent" class="animate-show" ng-repeat="filter in group.filters">

           <input type="checkbox" class="filterChild" value="{{filter.name}}" ng-model="filter.checked" ng-change="ModifyFilter(filter.checked,filter)"/>
                {{filter.name}} 
       </div>
    </div>

    <div>
      <h4>Active Filters</h4>

        <p class="clear-filters" ng-click="clearFilters()">Clear Filters</p>
        <ul ng-repeat="activeFilter in ActiveFilters">
            <li ng-model="activeFilter.checked" ng-click="removeFilter(ModifyFilter(activeFilter.checked,activeFilter))">{{activeFilter.name}}</li>
        </ul>
    </div>

</body>

Updated script:

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

app.controller("DashboardCtrl", function($scope) {

    $scope.clearFilters = function() {
        angular.forEach($scope.Filters[0].filters, function(filter) {
          filter.checked = false;
        });
        $scope.ActiveFilters = [];
    };

    $scope.IsChecked = false;
    $scope.ActiveFilters = [];

    $scope.ModifyFilter = function (IsChecked, Filter) {
        console.log(IsChecked);
      if (IsChecked) {
        $scope.ActiveFilters.push(Filter);
      }
      else {
        var indexz = $scope.ActiveFilters.indexOf(Filter);
        $scope.ActiveFilters.splice(indexz, 1);
      }
    };


    $scope.Filters = 
         [
        {
            "title": "Equipment",
            "filters": [
                { name: "Rope", checked: false },
                { name: "Cables", checked: false },
                { name: "Dowel", checked: false },
                { name: "Ball", checked: false }
            ]
        }
    ];  
});

You can find my solution on js fiddle: JsFiddle

How to programmatically unselect an ng-checkbox in AngularJS when it is removed from an array

Answer №1

Similar questions

Transmit information from a Chrome extension to a Node.js server

The steps to implement an onchange function for displaying image previews in a profile image tag

Issue with JavaScript ScrollTop

Verify the text file for any data, and if it contains any, display it on the web browser using JavaScript

An issue has occurred with the HTTP request to a PHP file in Angular

Utilizing the Express-busboy npm package to generate a new directory within the public folder of

Tips for linking together AJAX requests with vanilla JavaScript

Tips for displaying autocomplete suggestions as clickable links?

After props have been passed, the ReactJS ComponentWillMount() function is triggered

standards for matching patterns (such as .gitignore)

Simple request results in an error

How to send a contact form in Wordpress with multiple attachments via email without using any plugins

Tips on designing checkboxes with CSS

Enhancing UI-Grid: Implementing Dynamic Field Addition in the Header Name Section

What is the best way to extract values from this PHP script?

What is the method of utilizing shared services when the controllers do not rely on any shared services?

Retrieve the red, green, and blue components of a color in the RGB format

Unusual behavior observed while looping through an HTMLCollection returned by the getElementsByClassName method

"Troubleshooting async/await issue with Node.js Sequelize and configuring the connection

Issue with adding to lightbox feature when loading content dynamically using AJAX PHP is not functioning as expected