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);
};
Related
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.
I am trying to show multiple selected option of a person from selected value.
Here is an example but not working.
I want to do like this dynamically .
Basicly you need a trigger("chosen:updated")
I'd updated your fiddle, you can find here http://jsfiddle.net/ebilgin/hdz8f1b6/2/. I hope it works for you.
Add this to css (for example):
.result-selected{color:white !important; background:blue !important;}
$('.value').val('demo 1,demo 2');
$('.chosen-select').val($('.value').val().split(',')) // set value, accepts array
$('.chosen-select').chosen();
$('.chosen-select').on('change', function() {
values = $('.chosen-select').val();
$('.value').val(values);
}) ;
HTML
1. General Events.
<input type="checkbox" name="GE[]" value="Brainometer>
<input type="checkbox" name="GE[]" value="Hot Seat">
<input type="checkbox" name="GE[]" value="Mind Drill>
<input type="checkbox" name="GE[]" value="Techno Art>
<input type="checkbox" name="GE[]" value="Photography">
If U Want to get multiple selected option of a person from selected value Using PHP: use implode... multiple value can be store in $ge depends on what the user select...
PHP
if(isset($_POST['GE'])){
$ge = implode(", ",$_POST['GE']);
}else{
$ge = "";
}</p>
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.
I have a checkbox that should check all checkboxes. The checkbox works as it should by checking all the checkbox's, however angular doesnt think they have been checked? The only way angular knows if they are checked is if i manually check each one. (The brackets and for loop are blade php from laravel)
<label class="checkbox-inline">
<input type="checkbox" ng-model="everyoneCheck"/> Everyone
</label>
#foreach($company->users as $tagIndex => $user)
<label class="checkbox-inline">
<input type="checkbox" ng-checked="everyoneCheck" ng-model="newDiscussion.notify_partners[{{$tagIndex}}]" ng-true-value="{{$user->id}}" /> {{ $user->first_name }} {{ $user->last_name }}
</label>
#endforeach
upon click of the submit button i proceed to $http.post to my server, i just pass in an object to the post function, this is the object.
var discussionData = {
'title': $scope.newDiscussion.title,
'discussion': $scope.newDiscussion.summary,
'company_id': company_id,
'notify_partners': $scope.newDiscussion.notify_partners
};
for some reason when i use the check all approach, nothing gets put into notify_partners, however when i manually click each checkbox, they will get entered and submitted properly.
Any help? I feel like its some sort of binding issue, where i just need to tell angular, hey its updated!
Here's a way to do it:
<p><input type="checkbox" ng-model="globalCheck" ng-click="toggleCheckAll()" /> Check All</p>
<ul>
<li ng-repeat="i in init">
<input type="checkbox" ng-model="checkbox[$index]" /> Checkbox {{ $index + 1 }} {{ checkbox[$index] }}
</li>
</ul>
Then in your controller:
function myControl($scope) {
$scope.globalCheck = false;
$scope.checkbox = {};
$scope.init = [0,1,2,3,4,5,6,7,8,9];
$scope.toggleCheckAll = function() {
var k, val = !$scope.globalCheck;
console.log(val);
for(k in $scope.init) {
$scope.checkbox[k] = val;
}
}
}
See JSfiddle for working example
ng-checked does not update the value bound in ng-model. It only affects the presence of the checked attribute on the element itself.
Your best bet is to use ng-change to execute some function and update all your models accordingly.
<input type="checkbox"
ng-model="everyoneCheck"
ng-change="toggleCheckAll()"/>
And in your controller, you can have toggleCheckAll() loop over your models and set them based on the value of everyoneCheck
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.