I am trying to implement the angular data-indeterminate-checkbox directive in my application from the link below.
Example Fiddle
I have added ng-change to both the parent and the children checkboxes (same event) which updates the columns in a table below. The problem is when I check/uncheck the child checkboxes, the columns appear and dissapear fine and it works ok, but when I click the select all checkbox, the action is inverted. That is, when select all is checked, all columns hidden and when unchecked, all columns are visible.
In the snippet for the directive from the fiddle link mentioned above, in the else part, if I change the modelCtrl.$setViewValue(hasChecked); to modelCtrl.$setViewValue(true);, as shown in code below, the uncheck part works, i.e when I uncheck 'Select All', all columns are hidden but when I check it, nothing happens and it does not go to the ng-change event. Any help is much appreciated.
Thanks in advance and Happy New Year 2016!!
// Determine which state to put the checkbox in
if (hasChecked && hasUnchecked) {
element.prop('checked', false);
element.prop('indeterminate', true);
if (modelCtrl) {
modelCtrl.$setViewValue(false);
}
} else {
element.prop('checked', hasChecked);
element.prop('indeterminate', false);
if (modelCtrl) {
modelCtrl.$setViewValue(true);
}
}
Solved it by putting a condition on the ng-change event of the checkboxes. Here is the snippet - (as per the example fiddle):
if(!$scope.model.people[0].allEaten){
$timeout(function(){
updateModel();
refreshColumns();
},2000);
} else {
$timeout(function(){
refreshColumns();
},2000);
}
But please feel free to comment if there is a better answer to this.
Thank you!
Related
Instead of manually selecting the check boxes of several pages,
I am using TamperMonkey to select all the check boxes with a small Javascript function.
The checkboxes get selected but the next step (SyncNow)for the procedure is greyed out.
I think it has to do with changing classes.
Is there another way to select the checkboxes with a 'click' via TamperMonkey?
or
How do I add an extra class that will hopefully not grey out the next step?
You can see the code that I have here:
https://codepen.io/Marina_2019/pen/dxXmZL
I tried this, and it did not work:
function selectAll(){
document.getElementById("AllInventorySelected").checked = true;
}
}, false);
This function worked:
checkThem([].slice.call(document.querySelectorAll('input[type="checkbox"]')));
function checkThem(nodes) {
nodes.forEach(function(n) { n.checked = true });
}
The problem is that the next after selecting all the check boxes are greyed out (unless I do it manually).
I noticed that a class gets added if I select the check boxes manually.
Code snippets are here:
https://codepen.io/Marina_2019/pen/dxXmZL
A checkbox in ExtJs Form Panel is not binding properly , i.e when the value is changed from checked(value is 1) to unchecked (value is 0) the value in model for the respective field is still checked(1). This issue occurs in version 6.2.0.981, but the issue is not reproducible in latest version 6.2.1.167. Here is the fiddle for the same, toggle between the versions and check the issue. please let us know if there are any workaround for this issue in 6.2.0.981 version. Also in release notes of 6.2.1.167 its told that "EXTJS-21886 - Checkboxes don't return the correct value" is fixed, but how to have this fix in previous versions?
CheckBox Bind issue Fiddle
You can fix this by adding
uncheckedValue: 0
to your checkbox config. Excerpt from the docs:
By default this is undefined, which results in nothing being submitted for the checkbox field when the form is submitted
The bug was that nothing was submitted during model update as well, and since nothing was provided, the value of the model was not updated.
In ExtJS 6.6 I was still trying to figure this out and it wasn't as straight forward as I'd hoped (Having the checkbox bind to the model and pass 1 for true and 0 for false to the binding). I wanted to avoid having a formula with a middle man binding in the model because I'd have to have a formula for every checkbox and that seemed silly.. Extending the combo box class and overriding getValue method like below. The accepted answer worked ok for unchecked but I was still getting true on checked.
Ext.define('Components.BinaryCheckBox', {
extend: 'Ext.form.field.Checkbox',
xtype: 'binary-checkbox',
getValue: function () {
if (this.value) {
return 1;
} else {
return 0;
}
},
});
I'd like to create a form with checkboxes. At first it shouldnt be possible to check them. Then if you click submit they should be.
I got it working so its not clickable first with
function(e){ e.preventDefault(); }
But how do i make them clickable again after that?
That means you just want to go the the default behavior what you have removed first time. To this this you just have to do
function(e){ return true; }
Hope this work.
Easiest would be to disable the checkbox, then re-enable it when you're ready:
<input id="chk1" type="checkbox" disabled>
document.getElementById("chk1").removeAttribute("disabled");
If you're using jQuery, it would be easier to work with multiple checkboxes, and the syntax would be:
jQuery("#chk1").prop("disabled", false);
If you set your click handler to a function, just have that function prevent the click, depending on whether or not you want the boxes enabled. In your case, you said when the submit button was clicked, you want to start allowing them:
var _checkBoxesEnabled = false;
function checkBoxClicked(e) {
if (!_checkBoxesEnabled) {
e.preventDefault();
}
}
function submitButtonClicked() {
_checkBoxesEnabled = true;
}
Watch out for cross-browser compatibility - I'm spoiled by jQuery, so I don't remember exactly how the e in click handlers work with old IE versions using regular javascript.
I'm learning AngularJS and I have a question regarding the databinding for select elements. The databinding for textboxes works without any kind of event handling code. Once the ng-model attribute is set textbox updates when the model property changes and vice versa. There is no need for ng-change attribute.
However, for select elements we need to write functions that will be called via ng-change atribute.
Why does angularjs handle databinding without an ng-change attribute for textboxes but requires functions that will be called via ng-change attribute for select elements?
UPDATE:
Added the fiddle in the comments section. The example is from AngularJS in Action book. Click on one of the stories, change the textbox value and the model is updated. Change the selection in dropdown model is not updated.
UPDATE:
Added a new fiddle in the comments.
Thanks.
I've created a fiddle that works here - The issue is really just the dummy data here. In the original fiddle, the object created in the statuses array for {name:'Back Log'} and {name:'To Do'} are not the same (not ===) as the {name:'Back Log'} and {name:'To Do'} objects created in the dummy story objects.
To make the example work, I pass the indexed statuses into the getStories function. However I think this is really just a case of demo-induced confusion. (I've been looking at the MEAP for Angular in Action as well, and I think it could be simplified a bit like this one, that uses simple string statuses that will pass the === test
var getStories = function(statusesIndex) {
var tempArray = [
{title:'Story 00',
description:'Description pending.',
status: statusesIndex['To Do']
},
{title:'Story 01',
description:'Description pending.',
status: statusesIndex['Back Log']
}
];
return tempArray;
}
I think your confusion might be a result of the select documentation still being incorrect. (See my Disqus comment.) ng-model can and should be used with select. ng-change is optional and it just gives you a hook should you want to do something each time the selected option changes.
Normally you should use ng-options with select.
If i understood your question correctly then I think your guessing is wrong because for select boxes, you do not have to invoke ng-change event in order to fetch the selected option.
<select ng-model='select'>
<option>....</option>
<option value='one'>One</option>
<option value='Two'>Two</option>
</select>
// Your selected option will print below... without invoking ng-change
<div>You selected: {{select}}</div>
Demo: http://jsfiddle.net/jenxu/1/
I have a table of checkboxes. At the top is an Administrator box, then below a bunch of other permissions. If the Admin box is checked all other boxes should be checked, and if another box is unchecked then the Admin box should uncheck. I have it working on the initial click but if you click the Admin box it checks all others, then uncheck an other option it unchecks the Admin. Check the Admin a second time and nothing happens.
http://jsfiddle.net/HCpQg/1/
$("#administrator").click(function(){
if ($(this).is(':checked')) {
$('.permissions').attr('checked',true);
}
});
$(".permissions").click(function(){
if ($(this).is(':checked')) {
} else {
$('#administrator').attr('checked',false);
}
});
Use .prop() as opposed to .attr().
http://api.jquery.com/prop/
Just my 2 cents: if you use uniform styling:
$(function () {
$(":checkbox").uniform();
});
then you will need to call
$.uniform.update();
after you dynamically check/uncheck checkbox. I've just spent 6 hours trying until I dug up this bit...