Toggling checkboxes using Angular framework

Question

Toggling checkboxes using Angular framework

Within my form, there is a table with checkboxes in each column. The table consists of 3 <tr> elements, and each <tr> uses ng-repeate to call the webservice and display clone data (in JSON format). Upon clicking a checkbox, I create a JavaScript array to store the IDs using the following function :

checkoptions(array, model) {
angular.forEach(array, (value, key) => {
  if (array[key].checked) {
    model.push(array[key].id)
  }
})

Regarding the HTML structure :

<tr ng-repeat="developer in $ctrl.developers">
    <td>{{developer.label}}</td>
    <td>
      <input type="checkbox" id="{{developer.id}}"
          ng-change="$ctrl.checkoptions($ctrl.developers,$ctrl.employees.developers)" 
             ng-model="developer.checked">
                <label for="{{developer.id}}"></label>
     </td>

The functionality works as intended, but the issue arises when unchecking a checkbox - it remains in the JavaScript array.

javascript angularjs arrays checkbox

Answer 1

Answer №1

I made a modification to the code by adding an else statement to remove items from the array: http://jsfiddle.net/x9m1nqvp/1/

      $scope.checkoptions = function (array, model) {
        angular.forEach(array, (value, key) => {
          if (array[key].checked) {
            var index = model.indexOf(array[key].id);
            if(index == -1)
                model.push(array[key].id)
          }
          else {
            var index = model.indexOf(array[key].id);
            if(index >=0)
                model.splice(index, 1);
          }
      })

Answer 2

I made a modification to the code by adding an else statement to remove items from the array: http://jsfiddle.net/x9m1nqvp/1/

      $scope.checkoptions = function (array, model) {
        angular.forEach(array, (value, key) => {
          if (array[key].checked) {
            var index = model.indexOf(array[key].id);
            if(index == -1)
                model.push(array[key].id)
          }
          else {
            var index = model.indexOf(array[key].id);
            if(index >=0)
                model.splice(index, 1);
          }
      })

Answer 3

Answer №2

Although Everton's solution accomplishes the task, it can be seen as overly repetitive to iterate through every item in the array whenever a single checkbox changes state. There is no need to update each individual item in the array when only one checkbox is being toggled.

The following code snippet provides an alternative approach where only the specific checkbox that is toggled will be added to or removed from the employees.developers array (Note: eliminating the necessity of using angular.forEach):

$scope.checkoption = function (developer) {
    if (developer.checked) {
        var index = $scope.employees.developers.indexOf(developer.id);
        if (index == -1)
            $scope.employees.developers.push(developer.id)
    } else {
        var index = $scope.employees.developers.indexOf(developer.id);
        if (index >= 0)
            $scope.employees.developers.splice(index, 1);
    }
}

You can implement this logic in your HTML template like so:

<tr ng-repeat="developer in developers">
    <td>{{developer.label}}</td>
    <td>
        <input type="checkbox" id="{{developer.id}}"
            ng-change="checkoption(developer)" 
            ng-model="developer.checked">
        <label for="{{developer.id}}"></label>
    </td>
</tr>

Answer 4

Although Everton's solution accomplishes the task, it can be seen as overly repetitive to iterate through every item in the array whenever a single checkbox changes state. There is no need to update each individual item in the array when only one checkbox is being toggled.

The following code snippet provides an alternative approach where only the specific checkbox that is toggled will be added to or removed from the employees.developers array (Note: eliminating the necessity of using angular.forEach):

$scope.checkoption = function (developer) {
    if (developer.checked) {
        var index = $scope.employees.developers.indexOf(developer.id);
        if (index == -1)
            $scope.employees.developers.push(developer.id)
    } else {
        var index = $scope.employees.developers.indexOf(developer.id);
        if (index >= 0)
            $scope.employees.developers.splice(index, 1);
    }
}

You can implement this logic in your HTML template like so:

<tr ng-repeat="developer in developers">
    <td>{{developer.label}}</td>
    <td>
        <input type="checkbox" id="{{developer.id}}"
            ng-change="checkoption(developer)" 
            ng-model="developer.checked">
        <label for="{{developer.id}}"></label>
    </td>
</tr>

Toggling checkboxes using Angular framework

Answer №1

Answer №2

Similar questions

What is the correct way to establish a Cookie (header) using XMLHttpRequest in JavaScript?

The size of the search input and textarea in HTML decreases when viewed on an iPad device

Could one harness the power of SO's script for adding color to code within questions?

Vanishing Items - Three.js CanvasRenderer

What are the ways to enable VS Code's Intellisense to collaborate with AngularJS's injected services?

Steps to combine multiple arrays into a unified array:1. Begin by allocating a

What is the best way to include a new array at the beginning of a lexicographically sorted array?

JavaScript resets the timer whenever the page is refreshed

Transforming a date into a name: tips and tricks

how to make a post request to an API using Next.js

generating a new array object during every iteration

Having trouble getting your AngularJS code to work?

Sending AngularJS $http.post JSON request to an ExpressJS server, eagerly awaiting response

What is the best way to substitute unpredictable dynamic variables on-the-fly?

Include a <div> element to display the date in an HTML format, ensuring that the days and months

Encountered a "Transformer is not a constructor" error when trying to upgrade the React Native SDK version from 0.61.5 to 0.64

Is there a way to confirm if all div elements have a designated background color?

The proper way to compare numbers in JavaScript

ng-click fails to trigger after being added following the completion of the page load

Ways to retrieve property value from a component in Vue.js 2.0