I'm trying to toggle disabled status of several element using one button. I did function which only toggle status of one element.
Disabled() {
var element = <HTMLInputElement>document.getElementById("input");
if (element.disabled == true) {
element.disabled = false;
} else {
element.disabled = true;
}
}
what should I change to make it work?
You can bind the input's disabled property to a variable in your code and change that variable on click:
<input ng-disabled="disabled"/>
<button ng-click="disabled = !disabled">
Disable
</button>
Example: https://stackblitz.com/edit/angularjs-n78yrt?file=home%2Fhome.html
Update: Stackblitz changed to work without ng-syntax
Related
So here my problem
I am trying to make form toggles with a global toggle to basically check and uncheck all of them using ng-model.
$scope.globalToggle =
{
"toggle": true
}
$scope.Toggles =
{
"toggle1": true,
"toggle2": true,
"toggle3": true,
}
This is what Im trying to achieve in an efficient manner:
If global toggle is checked set all to true or false.
If any toggle is un-checked set global to false.
If any toggle is checked and the other two toggles are also checked
then set global to true.
Currently I have managed to use a long winded out process of scope functions and adding ng-click to each checkbox element to achieve this, but I was hoping there is some better way to achieve my goal where I don't have to use ng-click on my elements. Is it possible to have some binding between these two variables that can change their value based on the conditions when they are changed from the DOM using ng-model?
Here you have a snipped which does exactly what you want :)
you just have to put ng-click directive on your toggles and write your algorithm
basicaly that:
globalToggleClicked = function() {
for (var toggle in $scope.Toggles) {
if ($scope.globalToggle.toggle == true)
$scope.Toggles[toggle] = true;
else
$scope.Toggles[toggle] = false;
}
};
toggleClicked = function(toggle){
if (toggle == false)
$scope.globalToggle.toggle = false;
else if (toggle == true) {
var nbChecked = 0;
for (var t in $scope.Toggles) {
if ($scope.Toggles[t] == true)
nbChecked++;
}
if (Object.keys($scope.Toggles).length == nbChecked)
$scope.globalToggle.toggle = true;
}
};
multi toggle management
I know it's with ng-click, but you don't really have other ways to do that
I'm new to angularjs and wanted to know how to hide a button after clicking (using ng-click) on it.
<button ng-click="xyz()" class="btn-default pull-right">
Start
</button>
Basically, you needs two things:
A variable leveraging the button visibility
A function to update this variable (you could do it in the HTML but I discourage it).
So you would have your button:
<button ng-click="hideButton()" ng-show="isButtonVisible === true" class="btn-default pull-right">
Start
</button>
Then, you would have the following variables
$scope.isButtonVisible = true; // true to make the button visible by default
And finally, the function that toggles it:
$scope.hideButton = function() {
$scope.isButtonVisible = false;
}
Note that you could use ng-if to remove the button from the DOM if you won't need it again.
Example: https://plnkr.co/edit/fnW8HR58zKHs4T34XRan
Note that this is pretty much the most basic question you could have on AngularJS, so I would advice you to read a bit about it before asking Stack Overflow.
You will need a variable to denote the visibility of the button, its value will change with click event.
<button ng-click="clickEventFunction(params)" ng-hide="isButtonVissible">Button</button>
The default value of this variable should be "false" to show the button
$scope.isButtonVissible = false
Then in the clickEventFunction, change the value to hide the button
$scope.clickEventFunction = function(params){
$scope.isButtonVissible = true;
//* Do the logic code
}
I found the answer to the question with some assistance. Created an event in the click function and was able to hide the button.
<button ng-click="xyz($event)" class="btn-default pull-right">Start</button>
$scope.xyz = function ($event) {
$($event.target).hide();
Cheers to all your guidance.
In View:
<button ng-click="hideBtn = true" ng-hide="hideBtn">Button</button>
In controller :
$scope.hideBtn = false;
I hava a checkbox ,the model status.useJoin also bind the div.
<input type="checkbox" ng-model="status.useJoin" ng-click="toggleJoin($event);" >
<div ng-if="status.useJoin"> show area</div>
when status.useJoin is true ,will show div.
My question is ,when I want to prevent the default action of the checkbox. I will write function toggleJoin like this.
$scope.toggleJoin = function (dimension,$event) {
if (status.useJoin) {
$event.preventDefault();
return;
}
}
the checkbox action is stopped ,but status.useJoin is still modified. How can I stop the bind?
You can use ng-disabled directive
<input type="checkbox" ng-model="status.useJoin" ng-disabled="onYourDisableCondition();" >
$scope. onYourDisableCondition = function () {
if (status.useJoin) { //Add your additional conditions
return true;
}
}
We're trying to implement a checkbox and list with the following functionality:
Clicking the checkbox will either clear the array if there are items in there, or add a new item if not.
Remove an item from the array when clicking the Remove button, once the last item is removed the checkbox automatically unchecks itself.
The problem I am having is that if you click to remove each array item, then click the checkbox to add a blank entry, I'm expecting the checkbox to be checked again (as per the checked observable), however it is not?
I have the following code:
http://jsfiddle.net/UBsW5/3/
<div>
<input type="checkbox" data-bind="checked: PreviousSurnames().length > 0, click: $root.PreviousSurnames_Click" />Previous Surname(s)?
</div>
<div data-bind="foreach: PreviousSurnames">
<div>
<input type="text" data-bind="value: $data">
<span data-bind="click: $root.removePreviousSurname">Remove</span>
</div>
</div>
var myViewModelExample = function () {
var self = this;
self.PreviousSurnames = ko.observableArray(['SURNAME1', 'SURNAME2', 'SURNAME3']);
self.removePreviousSurname = function (surname) {
self.PreviousSurnames.remove(surname);
};
self.PreviousSurnames_Click = function () {
if (self.PreviousSurnames().length === 0) {
self.PreviousSurnames.push('');
}
else {
self.PreviousSurnames.removeAll();
}
alet(2)
}
}
ko.applyBindings(new myViewModelExample());
If you are using together the click and the checked then you need to return true from your click handler to allow the browser default click action which is in this case checking the checkbox:
self.PreviousSurnames_Click = function () {
if (self.PreviousSurnames().length === 0) {
self.PreviousSurnames.push('');
}
else {
self.PreviousSurnames.removeAll();
}
return true;
}
Demo JSFiddle.
You need to use a computed to monitor the length of the observable array. This way when the length reaches zero you can react to it automatically.
self.surnames = ko.computed(function() {
var checked = true;
if (self.PreviousSurnames().length === 0) {
self.PreviousSurnames.push('');
checked = false;
}
return checked;
});
Now you will have the blank text box when all of the names are cleared. If you update your binding on the checkbox it will function properly as well.
<input type="checkbox" data-bind="checked: surnames, click: PreviousSurnames_Click" />Previous Surname(s)?
FIDDLE
I have a few pages of long code, but I'm having difficulty getting this to work. The following script checks all and and disables all checkboxes with a certain ID using an onclick command on one main checkbox. When the user unclicks that box, the checkmarks disappear, but remain disabled. Even if they hit the reset button, the disabled boxes stay.
Javascript:
<script>
function checkAllbase(bx) {
var cbs = document.getElementsByTagName('input');
for(var i=0; i < cbs.length; i++) {
if(cbs[i].id == '1') {
cbs[i].checked = bx.checked;
cbs[i].disabled=true;
}
}
}
</script>
Give each checkbox input that is associated with a package a similar name or class. Without seeing your actual html, supplying sample html below
HTML
<input type="checkbox" class="package1" name="package1[]" value="vacation">
<input type="checkbox" class="package1" name="package1[]" value="bonus">
<input type="checkbox" class="package1" name="package1[]" value="fries">
JS
function togglePackage(isChecked,packageName) {
//Choose one of the two below to use
//Below selects the inputs by the class name
var cbs = document.querySelectorAll("input."+packageName);
//Or Below selects the inputs by the input name
var cbs = document.querySelectorAll("input[name^="+packageName+"]");
for(var i=0; i<cbs.length; i++) {
//Since they are either checked and disabled (both true)
//or unchecked and enabled (both false) we can just use
//isChecked to set both at once.
cbs.checked = isChecked;
cbs.disabled = isChecked;
}
}
//Then somewhere call the togglePackage function
//bx here would be the main checkbox that you want to
//have toggling the other boxes, and "package1" is obviously
//the name or the class you gave the checkboxes.
togglePackage(bx.checked,"package1");
The elements remain disabled because the value being set is a constant (literal) true.
What you can do is copy bx.disabled throughout, as you're doing with bx.checked:
cbs[i].checked = bx.checked;
cbs[i].disabled = bx.disabled;
Or add another argument to pass the desired disabled state:
function checkAllbase(bx, disabled) {
disabled = disabled !== false; // limit to `true` or `false`, prefer `true`
// ...
cbs[i].checked = bx.checked;
cbs[i].disabled = disabled;
// ...
}
// usage
checkAllbase(bx); // disables elements
checkAllbase(bx, true); // also disables elements
checkAllbase(bx, false); // enabled elements