We Keep Coding

Data on view is not binding with controller

I'm a newbie AngularJS. I'm trying to make a checkbox with following properties.
1.selects and deselects all other checkbox coresponding to the All checkbox
2.if all otherCheckbox are selected then All checkbox is automatically selected.if one of the otherCheckbox is unselected then All checkbox is automatically unselected. Here is the code in view
<div ng-repeat="fence in thisUserFence">
<label>
<input type="checkbox" ng-model="fence.status" ng-change="otherCheckbox()">{{fence.name}}
</label>{{fence.status}}
</div>
<div>
<label>
<input type="checkbox" ng-click="checkAll()" ng-model="isAllSelected">All
</label>{{isAllSelected}}
</div>
Code in controller-
$scope.checkAll=function(){
var checkStatus=!$scope.isAllSelected;
$scope.isAllSelected=!$scope.isAllSelected;
console.log($scope.isAllSelected);
angular.forEach($scope.thisUserFence,function(fence){fence.status=checkStatus;});
}
$scope.otherCheckbox=function(){
$scope.isAllSelected=$scope.thisUserFence.every(function(item){return item.status;});
console.log($scope.isAllSelected);
}
Above logic works fine untill you check All checkbox and then unselect
any of otherCheckbox .
The value of $scope.isAllSelected is false in console but in view value of {{isAllSelected}} is true .Its not updating in view.

Just change checkAll method like this, you do not need to change the status of isAllSelected in the method cause its already binded to the check box model
$scope.checkAll=function(){
angular.forEach($scope.thisUserFence,function(fence) {
fence.status=$scope.isAllSelected;
});
}
See working example here https://jsfiddle.net/Lt7aP/7426/

Angular table and HTML Checked Boxes with Disabling Feature in Remaining Checked Boxes

The goal is to have all the checked boxes become disabled when one box is checked. When I use this jquery code below, for some reason it does not work as it does in the SO solution mentioned here.
In this example I am populating a table using a MVC controller in a nodejs and angular stack. When this table displays, there is a checkbox next to each name that prints in the table. Is there a solution to correctly disable the checkboxes being populated in this angular script when one checked box is selected?
html
<table>
<thead>
<th>Names</th>
</thead>
<tr dir-paginate="x in names | filter:search | itemsPerPage:8">
<div class="checkbox" id="nameList">
<td><label><input type="checkbox" name="name" value={{x.name}}> {{ x.name }}</label></td>
</div>
</tr>
</table>
js
$(document).ready(function(){
$('#nameList input[type=checkbox]').change(function(){
if($(this).is(':checked')){
$('#nameList').find(':checkbox').not($(this)).attr('disabled',true);
}else{
$('#nameList').find(':checkbox').attr('disabled',false);
}
});
})

Try using ng-change and ng-model directives of angular to handle all these things.
Refer here https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D.

Here's how you do it using angular's ng-change with ng-disabled. ng-change executes an angular function whenever some changes was made to an input field(in this case, checking and unchecking the checkbox), ng-disabled on the other hand disables the input fields if the condition is true
On your template, put these to your checkbox input tag
<tr dir-paginate="x in names | filter:search | itemsPerPage:8">
<div class="checkbox" id="nameList">
<td>
<label>
<input type="checkbox" ng-disabled="isCBdisabled" ng-model="yourCBmodel" ng-change="cbChanged()" name="name" value={{x.name}}>
{{ x.name }}
</label>
</td>
</div>
</tr>
Then on your angular controller, put this
$scope.isCBdisabled = false;
$scope.cbChanged = function() {
$scope.isCBdisabled = true;
};
So this is what I did, on my controller, I initialized a scope isCBdisabled into false so that it wont disable the checkboxes right away. Then made a function cbChanged() that changes isCBdisabled into true causing the checkboxes to be disabled because of ng-disabled. However, just like i`ve said, it will disable all checkboxes including the selected one so that's another thing to brainstorm.

uncheck the checkbox in checkbox list in AngularJS

I want to uncheck the checkbox from the list of checkbox depending upon the condition.Checkboxes are generated from the ng-repeat
HTML
<li ng-repeat="col in columns">
<span class="inputH">
<input type="checkbox" value="col.name" ng-if="col.default === true" checked ng-click="onColSelect(col.name,$event)" id="column_{{$index}}">
<input type="checkbox" value="col.name" ng-if="col.default === false" ng-click="onColSelect(col.name,$event)" id="column_{{$index}}">
</span>
<span class="textH">{{ 'leadOpportunityHeader.' + col.name | translate }}</span>
</li>
while cliking each checkbox, I check some condition. If this condition is true then I uncheck the same checkbox.
My question is is it possible to uncheck the checkbox without using ng-model?
If its not possile then I need to know how will I do this with the help of ng-model

you can use ng-checked to check and uncheck checkbox instead of ng-model.
ng-checked=true or false

Why does an Angular model prevent a checkbox from being checked by default?

I'm using Angularjs for a website and I now want to use a checkbox. I first created a checkbox like this:
<input type="checkbox" checked>
I can of course remove and add checked to my liking to have it checked by default or not. I now add a model to it (the model is not defined in the controller yet):
<input type="checkbox" ng-model="settings.mySwitch" checked>
The checkbox still displays, but all of a sudden the checked has no effect at all anymore; the checkbox is always unchecked by default.
Why oh why does the model prevent the checked from having any effect? All tips are welcome!

That is because when as the element is rendered browser sets checked property but then angular processes ng-model on the check box (whose value is falsy) and it gets unchecked. Instead if you do ng-checked="true" it will work (because ng-checked directive sets the property after ng-model is processed as its priority is lower than ng-model). But your model's initial state will get messed up (if using 1.3.x+), as ng-checked will not update the state of ng-model. So just set the ng-model value to true instead.
Just for demonstration i am using ng-init (You should set the ng-model initial value in the controller instead).
<input type="checkbox" ng-init="settings.mySwitch=true" ng-model="settings.mySwitch" />
See Demo with comparison:-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app>
<p> With ng-checked {{settings.mySwitch}}
<input type="checkbox" ng-checked="true" ng-model="settings.mySwitch" />
<p> WIth Proper Initialization {{settings.mySwitch1}}
<input type="checkbox" ng-init="settings.mySwitch1=true" ng-model="settings.mySwitch1" />
</div>

Instead use ng-checked like this :
<input type="checkbox" ng-model="settings.mySwitch" ng-checked="true">
Edit: #PSL is right you should be using ng-init instead as it will mess up your ng-model.
<input type="checkbox" ng-init="settings.mySwitch=true" ng-model="settings.mySwitch" />

It is because of the initial value of settings.mySwitch. If you want the checkbox to be checked by default then instead of adding checked property you should set the initial value to true because when angular processes the template it will get its value and render the checked property accordingly.

How to work with checkboxes generated from ezMark?

I'm using ezMark library in my website alongwith PHP, Smarty, jQuery, etc. Here on one of the webpages I want to disable few checkboxes depending on some condition. After that there is one parent check box, upon selection of which all the checkboxes which are not disabled should get checked and should work vice-versa on deselcting the parent check box. Also after checking the parent checkbox if I uncheck any one of the selected checkboxes(which are not disabled) the parent checkbox should also get unchecked. I tried alot to achieve this by regular code of checking and uncheking the checkboxes (.attr('checked','checked') and .removeAttr('checked'); respectively) but doesn't work in this situation due to ezMark library. Now I'm using following code to check and uncheck the checkboxes as follows:
Code for parent check box:
<p id="parentCheckbox" class="custom-form">
<input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
<a class="drop" href="#">more</a>
</p>
The smarty code for multiple checkboxes creation:
{section name=tests loop=$all_tests}
<p class="custom-form">
<input class="custom-check checkBoxClass" type="checkbox" name="" id="" {if $all_tests[tests].is_test_lock!=1 && $all_tests[tests].test_assign_to_package=='no'} {else} disabled {/if}>
<label>{$all_tests[tests].test_name}</label>
</p>
{/section}
The jQuery code for selecting and deselectiong the checkboxes upon parent checkbox:
$(document).ready(function() {
$("#ckbCheckAll").click(function () {
if ($(this).is(':not(:checked)'))
$(".ez-checkbox").removeClass("ez-checked");
if($(this).is(':checked'))
$(".ez-checkbox").addClass("ez-checked");
});
});
When I look into Firbug Element Inspector I'm getting the different HTML created for the child checkboxes as follows:
<p class="custom-form">
<div class="ez-checkbox ez-checked">
<input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" name=""></input></div>
<label>N1P: Gravitation</label>
</p>
I'm not getting from where this <div> tag is coming. So in order to check and uncheck all the child checkboxes on selection of paren checkbox I'd written above logic. The normal logic is not getting worked due to this div tag and ezMark library. With the current code all the child checkboxes are getting selected including the disabled ones upon selecting the parent checkbox and upon unchecking the parent checkbox all the child checkboxes get unselected. Can you help by showing how to achieve the required functionality of selection and deselection of child checkboxes in this scenario? Thanks in advance.

The jQuery.ezMark generated structure is not really a problem to achieve what you want to. I wrote this jsFiddle to show you a way to proceed based on css classes to identify parent (.l0) and children (.l1).
I manually disabled some checkboxes for sample, but you can use your condition to disabled them.
Hope this can help you ;)