The value of the ng-model checkbox does not update or change when the checkbox is clicked

Question

The value of the ng-model checkbox does not update or change when the checkbox is clicked

There is a checkbox being used in the code snippet below:

<input type="checkbox" ng-click="toggleShowOtherUserConfiguration()"
       ng-model="showOtherUserConfiguration" 
       name="ShowOtherUserConfiguration"
       value="showOtherUserConfiguration" />

In the app.controller, the following setting has been established:

$scope.showOtherUserConfiguration = false;

The intention is for the checkbox to always display as false when the page loads.

However, the current behavior observed is as follows:

Upon loading the page, even though the value of

$scope.showOtherUserConfiguration

is false, the checkbox remains unchecked.

When the checkbox is manually checked, its value still displays as false.

If the checkbox status is changed from checked to unchecked, then the value of

$scope.showOtherUserConfiguration

changes to true.

Your advice is sought on how to ensure that

$scope.showOtherUserConfiguration

stays as false when the checkbox is unchecked and true when it is checked.

Please note: Do not make any changes within the

toggleShowOtherUserConfiguration()

function except for modifying the

$scope.showOtherUserConfiguration

value.

javascript .net angularjs checkbox

Answer 1

Answer №1

When working with checkboxes in AngularJS, remember to use ng-change instead of ng-click for checkbox events.

Here's an example code snippet:

<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
  <script type="text/javascript">
      var app = angular.module('app', []);
      app.controller('OneController', function ($scope) {
        $scope.showOtherUserConfiguration = false;
        $scope.toggleShowOtherUserConfiguration = function (argument) {
            console.log($scope.showOtherUserConfiguration);
        }
    });
</script>
</head>
<body ng-controller="OneController">
    <input type="checkbox"
           ng-change="toggleShowOtherUserConfiguration()"
           ng-model="showOtherUserConfiguration"
           name="ShowOtherUserConfiguration"
           value="showOtherUserConfiguration" />
    {{showOtherUserConfiguration}}
</body>
</html>

Answer 2

When working with checkboxes in AngularJS, remember to use ng-change instead of ng-click for checkbox events.

Here's an example code snippet:

<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
  <script type="text/javascript">
      var app = angular.module('app', []);
      app.controller('OneController', function ($scope) {
        $scope.showOtherUserConfiguration = false;
        $scope.toggleShowOtherUserConfiguration = function (argument) {
            console.log($scope.showOtherUserConfiguration);
        }
    });
</script>
</head>
<body ng-controller="OneController">
    <input type="checkbox"
           ng-change="toggleShowOtherUserConfiguration()"
           ng-model="showOtherUserConfiguration"
           name="ShowOtherUserConfiguration"
           value="showOtherUserConfiguration" />
    {{showOtherUserConfiguration}}
</body>
</html>

The value of the ng-model checkbox does not update or change when the checkbox is clicked

Answer №1

Similar questions

Trouble with Google Interactive Charts failing to load after UpdatePanel refresh

Create a WebGL object remotely on the server

tips on incorporating chosen while still enabling text input

Using Angular 6 to Format Dates

Error: The variable 'err' is undefined in the mongoose mongodb code

What is the best way to extract data from a proxy in VUE3?

Implementing image max-width and maintaining aspect ratios for responsiveness

Struggling to transfer information from JavaScript to Python Flask?

The battle between Google Visualization API JSON and ArrayToDataTable in Python, a nightmare of data types

The correct method for utilizing MediaTypeFormatter.WriteToStreamAsync within a Web API application

"Access Denied: Error 403 - Forbidden" encountered during the CSS minification and bundling process in ASP.NET Web Forms

Generating a Stream for FormData implementation

Strange behavior observed with Nuxt Js asyncData method returning values

Enter your text in the box to search for relevant results

Modifying the default error message in Yup: A step-by-step guide

Determining the best use-case for a React framework like Next or Gatsby versus opting for Create React App

Select state and city options similar to the national breakdown page

Issue: ArrayBuffer failing to function properly in conjunction with Float64Array in NodeJS

Is there a framework available to animate Pseudo CSS elements?

Ways to avoid Next.js from creating a singleton class/object multiple times