I have put together what I thought would be a very simple example of how I could fire off a function from a checkbox being checked in angular and have that function check to see the new value of the checkbox and accordingly display or not display a message. It works, but only after I have checked and unchecked the box at least once. For this reason I figured I simply would need to default the checkbox value to false and that would take care of the problem but it didn't. Can anyone help me tweak this to get it working and if so, maybe explain why my thinking is flawed, what do I not understand about the $scopes state. BTW it is also flipped, meaning that when I check the box the message goes away and when I uncheck it it says it's checked.
I am doing these exercises to get a better idea how angular works and I know deep down this is a javascript issue, but I still don't have it figured out. Any help is appreciated
app.js
var formApp = angular
.module('formApp', [])
.controller('formController', function($scope) {
$scope.formData = {};
$scope.redCheckFunction = function() {
if ($scope.formData.favoriteColors.red == true){
$scope.redMessage = "red is checked";
} else {
$scope.redMessage = "";
}
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div>
<h2>Angular Checkboxes</h2>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name"
ng-model="formData.name">
<label>Description</label>
<input type="text" class="form-control" name="description"
ng-model="formData.description">
</div>
<!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.red"
ng-init="favoriteColors.red.disabled=false"
ng-click="redCheckFunction()"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.green"> Green
</label>
</div>
<button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
<h2>{{redMessage}}</h2>
</form>
<h2>Sample Form Object</h2>
<pre>
{{ formData }}
</pre>
</div>
</body>
</html>
I created a pen to make things easier:
Checkbox Pen
ng-click is fired before the model is updated:
Note that ngClick events will occur before the model is updated.
You need to use the ng-change directive:
Evaluate the given expression when the user changes the input.
http://codepen.io/anon/pen/azaJob
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red" ng-init="formData.favoriteColors.red.disabled=false" ng-change="redCheckFunction()"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
</label>
</div>
When you enter the function redCheckFunction the value is already updated.
Related
I have created two radio buttons like Order, and Cart as like below, and I just want to get the TRUE (if the radio button is checked and by default Order button is checked) and FALSE if its not checked in app.component.ts file in angular JS.
app.component.html
<div class="container">
<form>
<label class="radio-inline">
<input type="radio" name="optradio" checked id="place_Oreder">Order
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="add_cart">Cart
</label>
</form>
</div>
I just written the following code which say if there is onclick on both button the boolean value will change:
isSelectedMSM:boolean=false;
isSelectedLive:boolean=false;
$(document).ready(function(){
$("#place_Oreder").click(function(){
this.isSelectedOrder=true;
});
});
$(document).ready(function(){
$("#add_cart").click(function(){
this.isSelectedcart=true;
});
});
I'm not sure that How can I print TRUE or FALSE in app.components file based on the radio button selected by user based on that I need to put if condition and call an appropriate service to invoke.
Can someone help me to achieve this? I just googled but I didn't find the right resource to implement the same. It would be much helpful if someone share your experience to solve this.
Update:
I'm not sure the above code will work. But can someone lead me that how can I achieve this in better way.
A simple click event will do the trick
<label class="radio-inline">
<input type="radio" name="optradio" checked id="place_Oreder" (click)="onClick('order')">Order
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="add_cart" (click)="onClick('cart')">Cart
</label>
comp.ts
onClick(item) {
if(item == 'order')
this.isSelectedOrder = true;
else if(item == 'cart')
this.isSelectedCart = true;
}
You can use ngForm for this, pass ref to function and from component, get the values as required.
Demo (Check console.)
HTML
<div class="container">
<form #myForm="ngForm" (submit)="submitForm(myForm)">
<label class="radio-inline">
<input ngModel type="radio" name="optradio" checked value="true" id="place_Oreder">Order
</label>
<label class="radio-inline">
<input ngModel type="radio" name="optradio" value="false">Cart
</label>
<button type="submit">Submit</button>
</form>
</div>
Component
submitForm(form: NgForm) {
console.log(form.value);
}
So this is the relevant part of my html-code. i tried binding the "formFriendsAll" scope to the ng-model.
<form ng-submit="submitForm()" >
<div class="col-sm-3">
<div class="form-group">
<label>Which Persons to show?</label>
<div class="radio">
<label>
<input type="radio" name="FriendsAll" ng-model="formFriendsAll" value="Friends" >
Friends
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="FriendsAll" ng-model="formFriendsAll" value="Alle">
All
</label>
</div>
<div>currently selected: {{formFriendsAll}}</div>
</div>
</div><td><input type="submit" class="btn btn-primary" value="Los!"/></td> </form>
This is the relevant js-code:
var challenge = angular.module('challengeApp', [])
challenge.controller('challengeController', function($scope) {
$scope.submitForm = function () {
alert($scope.formFriendsAll);
};
$scope.formFriendsAll = 'Friends';
});
I used the alert to test the change of value when i hit the submit button but i tried various methods like ng-changed, ng-click, ng-value. but nothing helped me solve the issue that my alert and "currently selected" stays on "Friends"
Any suggestions?
ok guys. seems like the AdminLTE.css i used in my head for the design of the radio buttons blocked the angular somehow
I know this is probably very easy! I have two radio buttons that ng-show a div with an input field if the 'site' radio button has been selected. The text input field is set to a ng-model called 'sitePostcode'. What I am trying to achieve is that if the 'solution' radio button is selected then 'sitePostcode' model will have 'solution' in it. And if the 'site' radio button is selected, then 'sitePostcode' will contain what ever was entered into the input box.
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
I thought that the radio buttons should also be 'sitePostcode' model, but when I tried that and entered text into the input field the div would dissapear as the model value changes from 'site'. Cheers
You can watch changes of product.group and change sitePostcode in accordance to it.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
</head>
<body data-ng-app="app" data-ng-controller="MainController">
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
<script>
var app = angular.module('app', []);
app.controller("MainController", function($scope) {
var customPostcode = '';
$scope.$watch('product.group', function (newVal, oldVal) {
if (newVal === 'Solution') {
customPostcode = $scope.sitePostcode;
$scope.sitePostcode = 'Solution';
} else {
$scope.sitePostcode = customPostcode;
}
});
});
</script>
</body>
</html>
The radio buttons should belong to a group. Add 'name' attribute to the input fields and give them the same value.
<input name="group1" type="radio" ng-model="product.group" value="Solution">Solution
<input name="group1" type="radio" ng-model="product.group" value="Site">Site
Radio buttons can be tricky in Angularjs. Here is a great example of how they can work: http://jsfiddle.net/K9MLk/246/.
I think that the best way to do this is to check the product.group value in the controller and set the sitePostcode to Solution.
Another way to do this is as you suggested. You can set the ng-model of your radio buttons to sitePostcode and change your check to ng-show="product.group != 'Solution'". This is assuming that the user will not type Solution in the input field.
<div>
<input type="radio" ng-model="sitePostcode" value="Solution">Solution
<input type="radio" ng-model="sitePostcode" value="Site">Site
</div>
<div ng-show="product.group != 'Solution'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
But as I said it is best to do this in the controller.
I have a Twitter Bootstrap form that has 6 vertical check boxes. I need to have an input form field each time they select a checkbox. It could be in the form of a popup or maybe something that appears out to the right of the checkbox. I figure this is some kind of javascript function but I have no idea how to do so. Any suggestions would be greatly appreciated. Each textbox if selected should have a field that pops up asking them for how many years experience they have in this certain field. This will info will be collected via $_POST variables. So each checkbox popup should have its own unique name so i can post it.
<div class="form-group">
<label class="col-md-4 control-label" for="positionsought">Position Sought</label>
<div class="col-md-4">
<div class="checkbox">
<label for="positionsought-0">
<input type="checkbox" name="positionsought" id="positionsought-0" value="Cutting">
Cutting
</label>
</div>
<div class="checkbox">
<label for="positionsought-1">
<input type="checkbox" name="positionsought" id="positionsought-1" value="Sewing">
Sewing
</label>
</div>
<div class="checkbox">
<label for="positionsought-2">
<input type="checkbox" name="positionsought" id="positionsought-2" value="Upholstery">
Upholstery
</label>
</div>
<div class="checkbox">
<label for="positionsought-3">
<input type="checkbox" name="positionsought" id="positionsought-3" value="Frame Department">
Frame Department
</label>
</div>
<div class="checkbox">
<label for="positionsought-4">
<input type="checkbox" name="positionsought" id="positionsought-4" value="Mill Room">
Mill Room
</label>
</div>
<div class="checkbox">
<label for="positionsought-5">
<input type="checkbox" name="positionsought" id="positionsought-5" value="Cushion">
Cushion
</label>
</div>
<div class="checkbox">
<label for="positionsought-6">
<input type="checkbox" name="positionsought" id="positionsought-6" value="Any">
Any
</label>
</div>
</div>
</div>
Although you already have found an answer, I believe that this would work better for your situation since you say you will have 6 checkboxes. This dynamically creates input fields for each checkbox by their names and removes them when the checkbox is unchecked.
First add this function to each checkbox onclick="dynInput(this);"
<input type="checkbox" name="check1" onclick="dynInput(this);" />
and add this to wherever you would like the inputs to display.
<p id="insertinputs"></p>
Then simply add this javascript function to your head.
<script type="text/javascript">
function dynInput(cbox) {
if (cbox.checked) {
var input = document.createElement("input");
input.type = "text";
var div = document.createElement("div");
div.id = cbox.name;
div.innerHTML = "Text to display for " + cbox.name;
div.appendChild(input);
document.getElementById("insertinputs").appendChild(div);
} else {
document.getElementById(cbox.name).remove();
}
}
</script>
JsFiddle here: http://jsfiddle.net/brL6gy7r/
You can use JavaScript here to do the job. When the checkbox is clicked and checked (because you can also check out.) a dialog will pop-up with all input-fields you want. You can change the dialog part to your desires. but this part is your main function:
$(document).ready(function () {
$('#chkBox').click(function () {
if ($(this).is(':checked')) {
// create input field
} else {
// if checkbox is not checked.. dont show input field
}
});
});
For a full demo on how to do this with a dialog, click this link and observe
http://jsfiddle.net/Runman44/5vy1m233/
Notice that you will need jQuery (and jQuery UI if you want to use the dialog like me)
There is a zero-JavaScript version that is dead simple and works in all major browsers. It takes advantage of the :checked pseudo-class and the adjacency selector. It works with an arbitrary number of checkboxes.
HTML:
<input type="checkbox" />
<input type="text" />
CSS:
input[type=text] {
visibility:hidden;
}
input[type=checkbox]:checked + input[type=text] {
visibility:visible;
}
here is the live demo
If you prefer, you can use display:none and display:inline rather than the visibility property.
The example I've provided assumes that the text field immediately follows the checkbox in the markup, but some variant of sibling/child selectors can be used to select it no matter where it is, as long as it is either a sibling or child (direct or indirect) of the checkbox.
I am trying to make this work but can't make it happen. I have a bootstrap template and i want to check and uncheck multiple checkboxes (like this: http://jsfiddle.net/v6wmV/177/ )
I know this is a common subject with many solutions, but none seem to work for this case and i would like to know why.
This is the code snippet from the view:
<div class="hide" id="states">
<div class="control-group">
<label class="control-label">Select</label>
<div class="check">
<div class="controls">
<label class="checkbox line">
<input type="checkbox" class="all" value="Todas" id="allstates" name="st[25]"/>All
</label>
<label class="checkbox line">
<input type="checkbox" value="Caba" id="" name="st[1]"/>Ciudad Autónoma de Buenos Aires
</label>
<label class="checkbox line">
<input type="checkbox" value="Buenos Aires" id="" name="st[2]"/> Buenos Aires
</label>
<label class="checkbox line">
<input type="checkbox" value="Catamarca" id="" name="st[3]"/> Catamarca
</label>
<label class="checkbox line">
<input type="checkbox" value="Chaco" id="" name="st[4]"/> Chaco
</label>
</div>
</div>
</div>
</div>
and this is my js file (with other functions):
$('.hide').hide();
$('#registered').click(function(){
$('#content').toggle('fast');
});
$('#age').click(function () {
$('#content2').hide('fast');
$('#content1').show('fast');
});
$('#range').click(function () {
$('#content1').hide('fast');
$('#content2').show('fast');
});
$('#with').click(function(){
$('#child').toggle('fast');
});
$('#showstates').click(function(){
$('#states').show('fast');
});
$('#hidestates').click(function(){
$('#states').hide('fast');
});
//function for check/uncheck
$('.all').click(function() {
var $checkboxes = $(this).parent().find('input[type=checkbox]');
$checkboxes.prop('checked', $(this).is(':checked'));
});
this is the fiddle: http://jsfiddle.net/jimena/j56Dy/
which is not working
you need to go up two stages instead of one. parent() gives you the label element, you need to go up to the "controls"-classed div to apply your find method :
var $checkboxes = $(this).parent().parent().find('input[type=checkbox]');
Of course that was to apply minimal change to your code way. The one provided by Joe up here is probably smarter : getting all the checkboxes you want without having to use parent() method. But to do so you might want to id your checkbox group so that you do not select all the checkboxes accross your DOM.
By the way, don't you have to show your hide div at some point to see your checkboxes ?
Edit> OK actually Manish is right with parents it is just right, forget my answer :D