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

Include various categories into the div containers of the listed items within the query outcomes

Why does my jQuery map code work in version 2.0 but not in version 3.0?

How can I update a property within an object in a sequential manner, similar to taking turns in a game, using React.js?

What is the best way to implement JQuery in order to trigger an event in a text box whenever the user hits the "enter

What is the best way to choose the initial element in every group using jQuery?

Strange occurrences within the realm of javascript animations

Do not decode HTML content within an iframe; instead, extract the data directly from the HTML source

Prevent the display of hyperlinks in the status bar when hovering over a hyperlink or button

It appears that AsyncStorage.getItem() is not functioning as expected

The property 'get' cannot be accessed because the axios module of vue__WEBPACK_IMPORTED_MODULE_0__ is undefined

I have a quick question: What is the most effective method for creating PDF templates with Angular and .NET 6, specifically for designs that feature heavy

Exploring the Depths of Scope Hierarchy in AngularJS

What is the best way to send HTML content from a controller using ajax?

Add data to a DataTable without the need to manually refresh the page

differences between using form's get method and sending an angular $http.get request

Incorporate the 'noty' javascript library into your Rails 5 project

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

Apollo-Server presents errors in a polished manner

Unable to properly bind events onto a jQuery object

Issues with rendering Google Maps on google-maps-react persists, stuck endlessly in loading phase