I am creating a web app in which i am using toggle button when a user click once on the toggle button 'yes' should be store in a $scope variable if the user click twice 'no' should be stored in a $scope variable
here is my codding for toggle button
<div class="switch">
<input ng-click="clickcheckbox()" id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
<label for="cmn-toggle-1"></label>
</div>
i have taken ng-click because i am not able to do this with ng-checked
here is my controller
$scope.clickcheckbox=function(){
//if user check the checkbox
$scope.check='yes';
//if user uncheck the checkbox
$scope.check='no';
}
if there are other better ways to do this(please help me out with them)
You can use the following code:
HTML
<input type="checkbox" ng-model="checkboxModel.value2"
ng-true-value="'YES'" ng-false-value="'NO'">
javascript:
$scope.checkboxModel = {
value2 : 'YES'
};
Where:
ngTrueValue : The value to which the expression should be set when selected.
ngFalseValue : The value to which the expression should be set when not selected.
Working example
Source
Try this:
$scope.clickcheckbox=function(){
$scope.check=='yes'? $scope.check='no': $scope.check='yes';
}
Inh HTML:
<div class="switch" ng-init="check='yes'">
<input ng-click="clickcheckbox()" id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
<label for="cmn-toggle-1">{{check}}</label>
</div>
The following code should work.
$scope.clickcheckbox = function() {
if($scope.check == undefined || $scope.check = 'no') {
$scope.check = 'yes';
} else {
$scope.check = 'no';
}
}
As a side note, a common way to deals with checkboxes and boolean values is do to the following:
<input type="checkbox" ng-click="check = !check">
Here, each click will revert the value between true and false.
Related
I am trying to check if a radio button is selected or not. If the "morn_before" radiobutton is selected, the data will be stored as "2", but if the "morn_after" radiobutton is selected instead, the data will be stored as "1".
Currently my code show below is not working. For example when i select the "morn_before" radiobutton, it doesnt print "morn_before checked true" in the console, despite me putting console.log("morn_before checked true") in that if statement.
HTML:
<div class="radiobutton">
<input type="radio" id="morn_before" name="morn_time" value="morn_before">
<label for="morn_before">Before Food</label><br>
<input type="radio" id="morn_after" name="morn_time" value="morn_after">
<label for="morn_after">After Food</label><br><br>
</div>
Javascript:
function check() {
let user=firebase.
auth().currentUser;
let uid;
if(user!=null){
uid=user.uid;
}
var firebaseRef = firebase.database().ref();
if(document.getElementById("morn_before").checked){
console.log("morn_before checked true");
firebase.database().ref(uid).child('/radiobutton/').child('/morn_time/').set("2");
}
else if(document.getElementById("morn_after").checked){
firebase.database().ref(uid).child('/radiobutton/').child('/morn_time/').set("1");
}
}
check();
You don't need any JavaScript for this. You can have a completely different display than the stored value.
<div class="radiobutton">
<input type="radio" id="morn_before" name="morn_time" value="2">
<label for="morn_before">Before Food</label><br>
<input type="radio" id="morn_after" name="morn_time" value="1">
<label for="morn_after">After Food</label><br><br>
</div>
Should produce the same result. The only improvement would be to set one of these to default true, in case the user chose neither. But that'd be up to you.
ADDITIONAL INFO: You are not supposed to read a radio button group that way.
You should go over some basics of HTML INPUT tag such as
https://www.geeksforgeeks.org/how-to-get-value-of-selected-radio-button-using-javascript/
I got some HTML like so of a Bootstrap checkbox. By default the checkbox is on.
<div id="full" class="checkbox">
<label>
<input type="checkbox" checked=""> Include Full Classes
</label>
</div>
I have this jQuery which detects whether the item is checked or non-checked
var full;
$('#full').change(function(){
if(this.checked)
{
full = true;
console.log(full);
} else {
full = false;
console.log(full);
}
});
What I want to achieve is, when the checkbox is selected, it would set full to 1, and if it is unselected, set full to 0.
I performed console.log() to the full variable, and in my output, all I got was false.
I am wondering what I am doing wrong?
This is the thread I am referencing
You will need to give your checkbox its own ID so that you can determine whether it's checked. Right now you are testing whether the div is checked (which isn't possible) - what you want to do instead is check whether the input element is checked!
Working Live Demo:
var full;
$('#checkbox').change(function() {
full = this.checked;
console.log(full);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="full" class="checkbox">
<label>
<input id="checkbox" type="checkbox" checked="">Include Full Classes
</label>
</div>
JSFiddle Example: https://jsfiddle.net/qtczor1q/2/
The output for this.checked is boolean should do the trick
var full;
$('#full').change(function(){
full = this.checked ? 1 : 0 ;
//or using jquery
// full = $(this).is(':checked') ? 1 : 0;
console.log(full);
});
First set all unchecked to false.
var $checked = $(':checkbox');
$checked.not(':checked').attr('value', 'false');
$checked.change(function(){
$clicked = $(this);
$clicked.attr('value', $clicked.is( ":checked" ));
});
$('#full') isn't the checkbox, it's the div. You want to look at the checkbox within the div.
var full;
var cb = $('#full input[type=checkbox]');
cb.change(function() {
if (cb.prop('checked')) {
full = true;
console.log(full);
} else {
full = false;
console.log(full);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="full" class="checkbox">
<label>
<input type="checkbox" checked="">Include Full Classes
</label>
</div>
Using an if statement looks like overkill to me. As #joyBlanks has correctly pointed out, if what you're looking for is true or false then this.checked is all you need. But if you want 1 or 0 then use the ternary operator.
$(':checkbox').on('change', function() {
console.log( this.checked ); //true or false
console.log( this.checked ? 1 : 0 ); //1 or 0
})
//trigger change event when the page loads -- checkbox is checked when page loads
.change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="full" class="checkbox">
<label>
<input type="checkbox" checked=""> Include Full Classes
</label>
</div>
If I were to do this, I would honestly just not use JQuery. Just do it simple.
document.getElementById("checkboxId").checked;
If you do not need to use JQuery, just use this variable.
I'm having a list of check boxes and a main check box which if selected checks all the check boxes .I can also check the individual check boxes.
HTML:
<button type="button" ng-disabled="!selectedAll">Click</button>
<div>
<input type="checkbox" ng-model="selectedAll" class="checkbox" ng- click="toggle=!toggle">
</div>
<div ng- repeat="item in items" >
<input type="checkbox" ng- checked="toggle" ng-model="selectedCheckBox[item.id]"> <i></i>
</div>
Controller:
$scope.toggle = false;
$scope.selectedIntervention = {};
I'm able to disable/enable the button by selecting the main check box(outside ng-repeat) by enabling ng-disabled="!selectedAll" .But I'm not able to diable the button if I select any check box that is inside ng-repeat.I tried by giving ng-model="!selectedCheckBox" but didn't worked that way.Any possible solution is highly appreciated.Thanks
$scope.toggle = false;
$scope.selectedCheckBox = {};
Do following
Add
ng-click="checked(toggle)"
In
<input type="checkbox" ng-click="checked(toggle)" ng-model="selectedCheckBox[item.id]">
And change button like this
<button type="button" ng-disabled="!toggle">Click</button>
And in controller
$scope.checked = function () {
$scope.toggle = !$scope.toggle;
}
I have several checkboxes in angular.js and I am trying to get the ng-model value from the selected checkbox when clicked. Any suggestions?
<div class="checkbox">
<label>
<input type="checkbox" ng-model="hyp" value="false" ng-click="selection($event)">
Hypertension
</label>
</div>
$scope.selection = function($event){
console.log($event.target.value);
}
I hope that this is clear enough :/
you can directly put your model inside your function : ng-click="selection(hyp)"
You can get the value directly from the model. So you can do this:
$scope.hyp = false; // You can remove the value attribute
$scope.selection = function() {
console.log($scope.hyp);
};
I have some data coming back from a resource that looks like:
$scope.phones = [
{
Value: <some value>,
IsDefault: true
},
{
Value: <some value>
IsDefault: false
}
];
And for simplicity sake, here's the repeater:
<div ng-repeat="phone in phones">
<input type="radio" name="phone" ng-model="phone.IsDefault" />
</div>
I would like whichever radio is checked to update the model accordingly - this is not happening. On page load, nothing is checked. I can use ng-checked - but without ng-model it wont bind back to the array. Am I missing something simple or am I stuck writing an ng-change event to manually update the array?
As of now, I wrote a ng-change event as well, it currently looks like:
ng-model="phone.IsDefault" ng-value="true" ng-change="newPhoneSelected($index)"
$scope.newPhoneSelected = function (index) {
for (var i = 0; i < $scope.phones.length; i++) {
if (i == index) $scope.phones[i].IsDefault = true;
else $scope.phones[i].IsDefault = false;
}
}
You are missingng-value... it is radio button they work based on value to mark a value as selected. You need either [value="" | ng-value=""]
<input type="radio"
ng-model=""
[value="" |
ng-value=""]>
Like:
<input type="radio" ng-value="true" name="boolean" ng-model="myValue" /> True
<input type="radio" ng-value="false" name="boolean" ng-model="myValue" /> False
Here is a plunker demo
Or with strings values:
$scope.myValue = 'Car'
html
<input type="radio" ng-value="'Car'" name="string1" ng-model="myValue" /> Car
<input type="radio" ng-value="'Airplane'" name="string1" ng-model="myValue" /> Airplane
Here is the second demo
This is probably the closest sample to what you have:
http://jsfiddle.net/JbMuD/
A radio button is used to select one out of many values. You want to change the property of one item (isDefault = true) and simultaneously of another one (isDefault = false).
The semantically correct way would be to have some kind of defaultPhone value:
<div ng-repeat="phone in phones">
<input type="radio" name="phone" ng-model="temp.defaultPhone" ng-value="phone"/>
</div>
Since your model requires that each phone "knows" itself wether it's default or not, you can add a listener:
$scope.$watch('temp.defaultPhone', function(defaultPhone) {
$scope.phones.forEach(function(phone) {
phone.isDefault = phone === defaultPhone;
});
});
Here's a working example.