All geek questions in one place

AngularJS ng-check does not change model value

I have a checkbox table of objects with tabs. If an object is checked, the value of object.isChecked set to true , and if it is not set, the value is set to false . However, I have a master checkbox that checks / deselects all the checkboxes in the table. However, this does not update the value of object.isChecked . How can I make a master checkbox change the values ​​of object.isChecked ?

+4
source share
1 answer

The problem should be that you are not checking the checkboxes inside Angular. If you want Angular magic to work, you have to do all your manipulations with the model inside the Angular area. I created a plunker to demonstrate. :

index.html

 <!DOCTYPE html> <html data-ng-app="demo"> <head> <script data-require=" jquery@1.9.0 " data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script> <script data-require=" angular.js@ *" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body data-ng-controller="DemoController"> <div data-ng-repeat="object in objects"> {{object.name}}: <input type="checkbox" data-ng-model="object.isChecked"> </div> Master: <input type="checkbox" data-ng-click="triggerAll()"> {{objects}} </body> </html>

script.js

 "use strict"; var demo = angular.module("demo", []); function DemoController($scope) { $scope.objects = [ { name : "First", isChecked : true }, { name : "Second", isChecked : false } ] $scope.triggerAll = function(){ angular.forEach($scope.objects, function(value){ value.isChecked = !value.isChecked; }) } }

Note that all flags are run using ngClick , and not with the usual onClick or jQuery handler. This allows Angular to do dirty checks and behave correctly.

+7
source

Source: https://habr.com/ru/post/1496923/

More articles:


All Articles