Data on view is not binding with controller - javascript

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/

Related

ng-repeat checkbox updation into database

Angular code
$scope.delTodo=function() {
$http.post('delete.php',{
stus:$scope.delstatus,
}).then(function(data,status,headers,config) {
});
};
Html code
<li ng-repeat="todo in todocontent track by $index">
<p class="cls-{{todo.inc_id}}">{{todo.todoName}}</p>
<input type="checkbox" ng-model="$parent.delstatus" ng-click="delTodo()" ng-true-value="'{{todo.inc_id}}'" ng-false-value="'{{todo.inc_id}}'" />
</li>
I want to update the database if checkbox is checked or unchecked and also when the checkbox is checked the css of specified text is changed automatically. checkboxes are in ng-repeat loop.
Problem - If the ng-model of checkbox is same then all the checkbox is checked .In this case the database updation work fine. But if I change the ng-model to correct the css part then updation of database not work.

JQuery selecting radio button using a variable

I'm trying to select a radio button using a variable but, although I can print the selected value the button does not stay selected.
This button is defined in an angular template as follows:
<a ng-click="selectNode($event, node)">
<input type="radio" name="library" style="float:left;" id="id-{{n}}" />
</a>
Where id is a GUID so is definitely unique.
Then, because it is the angular click event that is called when a button is selected I call this code in selectNode:
context.selectedNodes = [node];
$scope.selectedNode = node.$model.name;
var id = '#id-' + node.$model.id;
//console.log(typeof id);
//console.log(id);
$(id).prop("checked", true);
alert($("[name=library]:checked").val())
Which should theoretically check the radio button. However, it checks for a moment (it is checked when I call the alert) and then seems to disappear. I am however able to hardcode in an id and it stays checked.
I recommend diving more into the tools angular gives you to handle this things simply. If you need to track the value on this input, tie it to a model. If you want to process something once the checkbox has changed, use ng-change and tie it to a function.
<input type="radio" name="library" style="float:left;" ng-model=libraryModel ng-change="doSomething()" />
Keep in mind that doSomething() needs to be in scope, so in your controller, you need to define the function as $scope.doSomething(). Your model will also be attached to the $scope object, so you'd reference it as $scope.libraryModel. You can initialize the model as true or false as needed for a default value in the controller, then any user changes will auto update this value.
You're mixing jQuery and Angularjs, and it is not really worth. You can do the following just by using AngularJS ngModel, if you use AngularJs in your project.
Controller
function Controller($scope) {
//Init data input to value 1
$scope.data = ['1'];
}
HTML
<input type="radio" name="name" value="1" ng-model="data">
<input type="radio" name="name" value="2" ng-model="data">
Here, our $scope.data is set to 1 in our Controller, so it will match with the first input.

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.

Unselect a checkbox by default

I want to create a checkbox which is unchecked always by default and users should not check it. I don't want to make the checkbox disabled as i want to pass the value of the checkbox when i submit the form. Please suggest.
The below code is not working:
<input type="checkbox" id="chkbox1" name="chkbox1" value="unChecked" checked="false" readonly="readonly">
With the above code checkbox is always selected, i want the checkbox always be unselected and users should not able to select it.I should not use the disable option too as i want to send the value of checkbox when i submit the form.Thanks.
Just remove the checked attribute all together
<input type="checkbox" id="chkbox1" name="chkbox1" value="unChecked" readonly="readonly" />
Setting the checked attribute with any string value (even false) makes the checkbox checked
i want the checkbox always be unselected and users should not able to select it.I should not use the disable option too as i want to send the value of checkbox when i submit the form
It doesn't really sound like you want a checkbox at all, but just a hidden input that sends a value
<input type="hidden" name="chkbox1" value="unChecked" />
checked attribute sets the checkbox to checked status, no matter what value the attribute checked has.
checked="checked"
checked="true"
checked="false"
checked=""
all these set to checked status
so there is no way to unset the checkbox (except some js solution) manuelly except for completely dropping the checked attribute
UPDATE: Simply change disabled to readonly, so that user cannot check it, but you still can submit this field with form
I'm new so I can't leave a comment. But according to my understand to your problem, like#adeneo suggested, why not first use a hidden one that does pass a value for the "do" with the program; then put up a dummy disabled one for the "look" with the users? As you only need it for the moment? Then later you just hide the dummy one and show the real one?

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 ;)

Categories