Angular checkbox is not syncing with the model

Question

Angular checkbox is not syncing with the model

I am facing an issue in my code where the input is not properly binding to the checkbox. In my controller, I have defined a member variable like this:

$scope.sameOptionsOnReturn = true;

And in my view, I have set up the checkbox as follows:

<input type="checkbox"
       ng-model="sameOptionsOnReturn"
       ng-checked="sameOptionsOnReturn"
       ng-value="true"
       ng-change="setReturnOptions" />

Despite setting up the ng-model and ng-checked properties correctly, the input always shows true. Can anyone help me figure out what's wrong with this setup?

Note: Removing ng-value="true" does not solve the issue.

javascript angularjs checkbox data-binding

Answer 1

Answer №1

It seems that the code snippet provided is functional, indicating that the issue might lie elsewhere in your codebase.

function SuperController($scope) {
$scope.sameOptionsOnReturn = true;
}

angular.module('myApp', []);
angular
    .module('myApp')
    .controller('SuperController', SuperController)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="SuperController as s">
    <input type="checkbox"
       ng-model="sameOptionsOnReturn"
       ng-checked="sameOptionsOnReturn"
       ng-value="true"
       ng-change="setReturnOptions" />
    
    {{sameOptionsOnReturn}}
  </div>
</div>

Answer 2

It seems that the code snippet provided is functional, indicating that the issue might lie elsewhere in your codebase.

function SuperController($scope) {
$scope.sameOptionsOnReturn = true;
}

angular.module('myApp', []);
angular
    .module('myApp')
    .controller('SuperController', SuperController)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="SuperController as s">
    <input type="checkbox"
       ng-model="sameOptionsOnReturn"
       ng-checked="sameOptionsOnReturn"
       ng-value="true"
       ng-change="setReturnOptions" />
    
    {{sameOptionsOnReturn}}
  </div>
</div>

Answer 3

Answer №2

The ng-model attribute is designed to handle your data bindings seamlessly. There is no need to manually set ng-value="true" for your checkbox, as this would force it to always be checked. Simply remove the ng-value attribute from the input checkbox and rely on the ng-model value to automatically determine if the checkbox should be checked or unchecked.

Answer 4

The ng-model attribute is designed to handle your data bindings seamlessly. There is no need to manually set ng-value="true" for your checkbox, as this would force it to always be checked. Simply remove the ng-value attribute from the input checkbox and rely on the ng-model value to automatically determine if the checkbox should be checked or unchecked.

Angular checkbox is not syncing with the model

Answer №1

Answer №2

Similar questions

How can I prevent users from selecting text when they right click using JavaScript?

Orionjs collection: Received undefined instead of an object

Preserve final variable state - Angular

Using Node.js, Express, and Socket.IO to establish real-time communication between two static client pages

Warning from Socket.io: The client has not completed the handshake and should attempt to reconnect

The ng-grid image filter feature using AngularJS is currently experiencing some technical issues

Having Trouble with Jquery UI Date Picker?

Using Ember.js to make a REST API request

Is there a way to make the sidepanel appear and be edited with just one click on a Chrome extension, instead of the current two-click requirement?

JavaScript, XML, and PHP all support the use of HTML entities within their code

The object in three.js disappears from the scene but remains visible

Determining the type of <this> in an Object extension method using TypeScript

Using a personalized function in JQuery

Using Jquery to manipulate arrays based on options selected from a dropdown menu

Utilizing jQuery UI autocomplete with AJAX and JSON data sources

Developing a modal with various hyperlinks

Event emitting from a parent Vue.js component

Get rid of any unnecessary class on the element

Modify the article category within the Ajax operation

Unexpectedly, Angular 1.5 is providing a response status of NULL (-1) instead of 503 because of cors issues