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

What is the best way to determine the total number of elements within this JSON data structure?

Filtering data in Laravel can be efficiently achieved by utilizing Laravel's ORM hasmany feature in conjunction with Vue

Exploring ways to validate the existence of a class in HTML table elements

The selected attribute does not function properly with the <option> tag in Angular

Encountered the error message "A property 'split' cannot be read of undefined" while attempting to run a React Native application

Reduce the use of if statements

Tips for retrieving specific values from drop-down menus that have been incorporated into a dynamically-sized HTML table

javascript - The Key Pair of a Jquery Object is Not Defined

What enables typescript to be eligible for transpiling is its equivalent level of abstraction to javascript?

The Javascript code I wrote is unable to detect the array element that was initially defined in Python

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Is there a messaging app that provides real-time updates for when messages are posted?

How to Generate an Array of JSON Objects in JavaScript on a Razor Page using a Custom ViewModel in MVC?

Iterating variables in Vue.js is reminiscent of the process in AngularJS

Is it possible for me to retrieve/load a <datalist> element from a different file?

The client end encountered an issue preventing the saving of a jpeg image

Mouse click failing to trigger CSS property update

Keystroke to activate Ant Design Select and start searching

The designated <input type=“text” maxlength=“4”> field must not include commas or periods when determining the character limit

Creating a dynamic select input in React that displays a default value based on other user inputs