Develop Reference

print different text on checkbox check/uncheck with angularjs

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.

AngularJS - Deselect Radio button

Is there a way I can deselect a radio button on click of it? I'm using AngularJS 1.4.4. Using one of the solutions I found here, I've added an ng-click event, but it doesn't work.
foreach (var part in Model.ChildParts)
{
<div class="radio col-md-12">
<input type="radio"
id="#Model.FieldName"
name="#Model.FieldName"
ng-model="gPA(#Model.Id).value"
value="#((part as BaseInputPartVM).GetStringValue())"
ng-click="uncheck($event, #Model.Id)" />
</div>
}
In the controller, I have the following code. The below "if" condition is always turning to true and hence everytime I try selecting a radio, it is always set to false. My goal is to deselect a radio button on click of it, if it is already selected.
$scope.uncheck = function (event, partId) {
if ($scope.gPA(partId).value == event.target.value)
$scope.gPA(partId).value = false
}

The radio button, by design, is not supposed to be unselected. I would consider using a checkbox instead. https://ux.stackexchange.com/questions/13511/why-is-it-impossible-to-deselect-html-radio-inputs

Following code worked:
foreach (var part in Model.ChildParts)
{
<div class="radio col-md-12">
<input type="radio"
id="#Model.FieldName"
name="#Model.FieldName"
ng-model="gPA(#Model.Id).value"
value="#((part as BaseInputPartVM).GetStringValue())"
ng-mouseup = "setPreviousSelectedValue(#Model.Id)"
ng-click="uncheck($event, #Model.Id)" />
</div>
}
<input type="hidden" id="previousRadioSelection" name="previousRadioSelection" ng-model="previousRadioSelection" value="" />
In the controller,
//set previous selected value of radio button
$scope.setPreviousSelectedValue = function (partId) {
$scope.previousRadioSelection = $scope.gPA(partId).value;
}
//uncheck radio button
$scope.uncheck = function (event, partId) {
if ($scope.previousRadioSelection == event.target.value)
$scope.gPA(partId).value = null;
}

how to get ng-repeat checkbox values on submit function in angularjs

I have a form which has 10 checkboxes. By default angular js triggers on individual checkbox. I want to grab all selected check box values on submit action only. Here is my code...
<form name="thisform" novalidate data-ng-submit="booking()">
<div ng-repeat="item in items" class="standard" flex="50">
<label>
<input type="checkbox" ng-model="typeValues[item._id]" value="{{item._id}}"/>
{{ item.Service_Categories}}
</label>
</div>
<input type="submit" name="submit" value="submit"/>
</form>
$scope.check= function() {
//console.log("a");
$http.get('XYZ.com').success(function(data, status,response) {
$scope.items=data;
});
$scope.booking=function(){
$scope.typeValues = [];
console.log($scope.typeValues);
}
I am getting empty array.
Can somebody tell how to grab all selected checkbox values only on submit event.

<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.SELECTED" ng-true-value="Y" ng-false-value="N"/>
</div>
<input type="submit" name="submit" value="submit" ng-click="check(items)"/>
$scope.check= function(data) {
var arr = [];
for(var i in data){
if(data[i].SELECTED=='Y'){
arr.push(data[i].id);
}
}
console.log(arr);
// Do more stuffs here
}

Can I suggest reading the answer I posted yesterday to a similar StackOverflow question..
AngularJS with checkboxes
This displayed a few checkboxes, then bound them to an array, so we would always know which of the boxes were currently checked.
And yes, you could ignore the contents of this bound variable until the submit button was pressed, if you wanted to.

As per your code all the checkboxes values will be available in the typeValues array. You can use something like this in your submit function:
$scope.typeValues
If you want to access the value of 3rd checkbox then you need to do this:
var third = $scope.typeValues[2];

Declare your ng-model as array in controller, like
$scope.typeValues = [];
And in your template, please use
ng-model="typeValues[item._id]"
And in your controller, you will get this model array values in terms of 0 and 1. You can iterate over there.

How do you validate a checkbox in Angular on submit with a show/hide?

I have Angular setup to disable a submit button until a checkbox is checked. What I want though, is that when you click submit a validation message appears saying you have to check "agree" first. I don't think the button being disabled is doing me any favors, but I'm not sure what to try next. Here's my code:
<div ng-app class="test">
<input type="checkbox" id="agree_checkbox" ng-model="checked">
<label for="agree_checkbox">I agree.</label>
<div class="validation">You have to agree first.</div>
<button type="submit" ng-disabled="!checked">Submit</button>
</div>
Could anyone give me some pointers on how to do this? JSFiddle
Thanks,
K-

Try this way:
DEMO
<div ng-app class="test" ng-init="valid=true">
<input type="checkbox" id="agree_checkbox" ng-model="checked" >
<label for="agree_checkbox">I agree.</label>
<div class="validation" ng-if="!valid">You have to agree first.</div>
<button type="submit" ng-click="valid=checked">Submit</button>
</div>
And don't forget to remove:
display: none;
color: #fff;
from your validation css.
EDIT:
And if you want to prevent form from being submitted:
$scope.submit = function() {
if($scope.valid) {
console.log('submit form')
}
}
DEMO 2

Check this demo I prepared: http://codepen.io/Samuelson/pen/QbKXer
It checks the checkbox state with javascript.
angular.module('app', [])
.controller('AppController', function($scope){
$scope.alert = function(index, event){
if(document.getElementById('checkbox').checked) {
return;
} else {
alert("Hey! " + index);
}
}
});

Can you get this ng-model value from ng-click?

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