I have a form where users have to answer questions through checkboxes. There are quite few checkboxes and I'm using AngularJS in the form to validate it. A basic validation is that all the required fields are filled.
Below is my example code:
<input type="checkbox" name="skills"> IT
<input type="checkbox" name="skills"> Design
<input type="checkbox" name="skills"> Photoshop
<input type="checkbox" name="skills"> Writing
Now I want the checkboxes to be required so from the "skills" checkboxes the user atleast checks 1 box.
I've tried putting the required tag but it didn't seem to work.
Im using AngularJS to validate my form like so
<button ng-disabled="myForm.$invalid">Submit</button>
Any idea how I can fix this? If you can working fiddle that would great.
If you want to validate using ng-disabled="myForm.$invalid"
var app = angular.module('myModule', []);
app.controller("myController", function ($scope) {
$scope.choices = [{"name":"IT"},{"name":"Design"},{"name":"Technology"}];
$scope.checkBoxArray = [];
$scope.validate = function (value) {
if ($scope.checkBoxArray.indexOf(value) == -1){
$scope.checkBoxArray.push(value);
}
else {
$scope.checkBoxArray.splice($scope.checkBoxArray.indexOf(value), 1);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myModule">
<body ng-controller="myController">
<ng-form name="myForm">
<span ng-repeat="choice in choices">
<input type="checkbox" name="skills" ng-required="checkBoxArray.length==0" ng-model="choice.checked" ng-change="validate(choice.name)">
{{choice.name}}
</span>
</ng-form>
<button ng-disabled="myForm.$invalid">Submit</button>
</body>
</html>
Try this working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="checkBoxForm">
<input type="checkbox" name="skills" ng-model="IT">IT
<input type="checkbox" name="skills" ng-model="Design">Design
<input type="checkbox" name="skills" ng-model="Photoshop">Photoshop
<input type="checkbox" name="skills" ng-model="Writing">Writing
<button ng-disabled="!IT&&!Design&&!Photoshop&&!Writing">Submit</button>
</form>
</div>
You can use a array to do this:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.collection=[{
"Name": "IT"},
{
"Name": "Design"},
{
"Name": "Photoshop"},
{
"Name": "Writing"}];
$scope.disableButton = true;
$scope.doTheThings = function (item)
{
if (item.checked)
$scope.disableButton = true;
else
$scope.disableButton = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in collection">
<input type="checkbox" name="skills" ng-model="item.checked" ng-click="doTheThings(item)"> {{item.Name}}
</li>
</ul>
<button ng-disabled="disableButton"> Submit </button>
</form>
</div>
Related
I have an array which has objects, comes from server.
And I have to make list with this array.
I want to set default value to each radio button,
but only the last item has default value.
Please see my code.
<div id="{{product.product_id}}" class="item-box" ng-repeat="product in cartProducts track by $index">
<div class="radio-box">
<input type="radio" name="send_num" ng-checked="product.isBasicNum" ng-click="product.isBasicNum=true"> NumType A
<input type="radio" name="send_num" ng-checked="!product.isBasicNum" ng-click="product.isBasicNum=false"> NumType B
</div>
<div class="radio-box">
<input type="radio" name="send_res" ng-checked="product.isImmediateSend" ng-click="product.isImmediateSend=true"> SendType A
<input type="radio" name="send_res" ng-checked="!product.isImmediateSend" ng-click="product.isImmediateSend=false"> SendType B
</div>
<div class="radio-box">
<input type="radio" name="receive" ng-checked="product.isRecieveDupable" ng-click="product.isRecieveDupable=true"> ReceiveType A
<input type="radio" name="receive" ng-checked="!product.isRecieveDupable" ng-click="product.isRecieveDupable=false"> ReceiveType B
</div>
</div>
and this is fiddle.
What did I miss?
I've tried to find answer, but I could not find similar with mine.
How to set default value to all items?
Thanks in advance.
All radio buttons share the same three name attribute values. So you've mistakenly put them into groups. This means when you click one radio (setting it to true) the browser automatically sets all other radios to false that are in the same group.
Clicking on the radios will show you this fact. You need to use different name attribute values. Note my use of {{$index}} in the below example:
var myApp = angular.module('MyApp', []);
myApp.controller('MyController', function($scope){
$scope.cartProducts = [
{product_id:1291803},
{product_id:2365123},
{product_id:5463434},
{product_id:8752642},
{product_id:4566484}
];
$scope.initDefValue = function () {
angular.forEach($scope.cartProducts, function (product) {
product.isBasicNum = true;
product.isImmediateSend = true;
product.isDirectEnterNum = true;
product.isRecieveDupable = true;
product.isBasicBanner = true;
});
};
$scope.initDefValue();
});
.item-box {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyController">
<div id="{{product.product_id}}" class="item-box" ng-repeat="product in cartProducts track by $index">
<div class="radio-box">
<input type="radio" name="send_num{{$index}}" ng-checked="product.isBasicNum" ng-click="product.isBasicNum=true"> NumType A
<input type="radio" name="send_num{{$index}}" ng-checked="!product.isBasicNum" ng-click="product.isBasicNum=false"> NumType B
</div>
<div class="radio-box">
<input type="radio" name="send_res{{$index}}" ng-checked="product.isImmediateSend" ng-click="product.isImmediateSend=true"> SendType A
<input type="radio" name="send_res{{$index}}" ng-checked="!product.isImmediateSend" ng-click="product.isImmediateSend=false"> SendType B
</div>
<div class="radio-box">
<input type="radio" name="receive{{$index}}" ng-checked="product.isRecieveDupable" ng-click="product.isRecieveDupable=true"> ReceiveType A
<input type="radio" name="receive{{$index}}" ng-checked="!product.isRecieveDupable" ng-click="product.isRecieveDupable=false"> ReceiveType B
</div>
</div>
</div>
</div>
There should be different name attributes for each iteration of the product.
For example, instead of just send_num, you can name the radio of the first product to be send_num_1291803, send_num_2365123 for the second product, and so on.
Here is some sample code:
HTML:
<input type="radio" name="{{getSendNumName(product)}}" ng-checked="product.isBasicNum" ng-click="product.isBasicNum=true"> NumType A
<input type="radio" name="{{getSendNumName(product)}}" ng-checked="!product.isBasicNum" ng-click="product.isBasicNum=false"> NumType B
Controller:
$scope.getSendNumName = function(product) {
return 'send_num_' + product.product_id;
}
Your radio button's has the same name when you're performing loop. That's why the last item will be only selected.
Try this code
var myApp = angular.module('MyApp', []);
myApp.controller('MyController', function($scope){
$scope.cartProducts = [
{product_id:1291803},
{product_id:2365123},
{product_id:5463434},
{product_id:8752642},
{product_id:4566484}
];
$scope.initDefValue = function () {
angular.forEach($scope.cartProducts, function (product) {
product.isBasicNum = true;
product.isImmediateSend = true;
product.isDirectEnterNum = true;
product.isRecieveDupable = true;
product.isBasicBanner = true;
});
console.log($scope.cartProducts);
};
$scope.initDefValue();
});
.item-box {
border: 1px solid red;
}
<div ng-app="MyApp">
<div ng-controller="MyController">
<div id="{{product.product_id}}" class="item-box" ng-repeat="product in cartProducts track by $index">
<div class="radio-box">
<input type="radio" name="send_num-{{$index}}" ng-checked="product.isBasicNum" ng-click="product.isBasicNum=true"> NumType A
<input type="radio" name="send_num-{{$index}}" ng-checked="!product.isBasicNum" ng-click="product.isBasicNum=false"> NumType B
</div>
<div class="radio-box">
<input type="radio" name="send_res-{{$index}}" ng-checked="product.isImmediateSend" ng-click="product.isImmediateSend=true"> SendType A
<input type="radio" name="send_res-{{$index}}" ng-checked="!product.isImmediateSend" ng-click="product.isImmediateSend=false"> SendType B
</div>
<div class="radio-box">
<input type="radio" name="receive-{{$index}}" ng-checked="product.isRecieveDupable" ng-click="product.isRecieveDupable=true"> ReceiveType A
<input type="radio" name="receive-{{$index}}" ng-checked="!product.isRecieveDupable" ng-click="product.isRecieveDupable=false"> ReceiveType B
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
I have a button that I need to disable if the there is no checked checkbox on my ng-repeat.
<button class="" data-toggle="modal" data-target="#rejectModal" contenteditable="false" id="delbutton" ng-model="delbutton" ng-disabled="!item.checked">
and my checkbox is like this
<input type="checkbox" name="select" value="checked" ng-model="item.checked"/>
How can I possibly do this?
Here is the plunker for your problem. [https://plnkr.co/edit/AIrKVLedt6mcggvpmJE2?p=preview][1]
Controller:
app.controller('MainCtrl', function($scope) {
$scope.Items = [
{checked:false},
{checked:true},
{checked:false},
];
$scope.setButtonEnabled = function(itemchecked){
var isButtonEnabled =false;
angular.forEach( $scope.Items, function(item){
if(item && item.checked)
isButtonEnabled = true;
});
return isButtonEnabled;
};
});
Html:
<div ng-repeat="item in Items">
<input type="checkbox" name="select" value="checked" ng-model="item.checked" ng-change="setButtonEnabled()" />
</div>
<br>
<button id="delbutton" ng-disabled="setButtonEnabled()">Submit</button>
When onClick on link occurs, all checkboxes present in that div are checked.
function initSelectAll() {
$("form").find("a.selectAll").click(function() {
var cb = $(this).closest("div").find("input[type=checkbox]");
cb.not(":checked").click().length || cb.click();
//........WANT TO UNCHECK checkboxes with class="file" where link id is 'id="ninapaya"'; how to do that?......
return false;
});
}
initSelectAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
Select
<span class="kukapaya">(alle)</span>
<br>
<input type="checkbox" class="document" name="check2">
<input type="checkbox" class="document" name="check2">
<br>
<input type="checkbox" class="File">
<input type="checkbox" class="File">
</div>
</form>
Requirement: We should not check the checkboxes with class="File".
JSFiddle: https://jsfiddle.net/k4d6zpay/
It could be simplified using .prop(.prop( propertyName, function )) and using :not selector
$("form").find("a.selectAll").click(function() {
$(this).closest("div").find("input[type='checkbox']:not('.File')").prop('checked', function() {
return !this.checked;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<div>
Select
<span class="kukapaya">(alle)</span>
<br>
<input type="checkbox" class="document" name="check2">
<input type="checkbox" class="document" name="check2">
<br>
<input type="checkbox" class="File">
<input type="checkbox" class="File">
</div>
</form>
try this:
function initSelectAll() {
$("form").find("a.selectAll").click(function() {
var cb = $(this).closest("div").find("input[type=checkbox]");
cb.not(":checked").not('.File').click().length || cb.click();
return false;
});
}
initSelectAll();
Also update in your jsfiddle link: https://jsfiddle.net/k4d6zpay/1/
function initSelectAll() {
$("form").find("a.selectAll").click(function() {
var cb = $(this).closest("div").find("input[type=checkbox]:not(.File)");
cb.not(":checked").click().length || cb.click();
//........WANT TO UNCHECK checkboxes with class="file" where link id is 'id="ninapaya"';
$(this).closest("div").find("input[type=checkbox][id='ninapaya'].File").prop('checked',false);
return false;
});
}
initSelectAll();
Hello everyone i have faced some problem in case of nested checkbox uses. In my problem i m stuck on to how to use IncludeAll on click checkbox. If checkbox value is true then it's give me a value of that. if IncludeAll checkbox is true then all checkbox will be selected and show the value of all in Array. and if one of the checkbox is false then IncludeAll checkbox false..But in Case the other checkbox will be selected.
This is my Fiddle Link : http://jsfiddle.net/0x4396pu/1/
Here is my Html Code:
<form action="#" ng-controller='MyCtrl'>
<div class="control-group" ng-repeat="story in stories">
<br>
<input type="checkbox" ng-model="story.selectionAll">
<label class="control-label">IncludeAll {{story}}</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="browser in browsers">
<input type="checkbox" value="{{browser}}"
ng-model="selection[story].browsers[browser]"
ng-checked="story.selectionAll">
{{browser}}
</label>
</div>
</div>
</div>
<pre>{{selection | json }}</pre>
</form>
Here is my Controller file :
function MyCtrl($scope) {
$scope.stories = ['1', '2', '3'];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
angular.forEach($scope.stories, function(story) {
$scope.selection[story] = {
browsers: {},
};
});
}
Thanks in Advance.
I am answer my own Question. But anyway Here is Answer how to select Checkbox in Nested ng-repeat.i think It's Help you Thanks.
Http Plunkr LInk http://plnkr.co/edit/OQxi53xtVKOgToPhzDUZ?p=preview
Here is Html Code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4
/angular.min.js">
</script>
<script src="script.js"></script>
</head>
<body>
<form action="#" ng-controller='detailContrller'>
<div class="control-group" ng-repeat="story in stories"> <br>
<h4> Enter Data </h4>
Name : <input type="text" data-ng-model="selection[story].Name1"
placeholder="Enter Name"> <br>
Address : <input type="text" data-ng-model="selection[story].Name2"
placeholder="Enter Address"> <br>
City : <input type="text" data-ng-model="selection[story].Name3"
placeholder="Enter City"> <br>
Phone : <input type="text" data-ng-model="selection[story].Name4"
placeholder="Enter Phone "> <br>
State : <input type="text" data-ng-model="selection[story].Name5"
placeholder="Enter State"> <br>
<input type="checkbox" ng-model="selection[story].all"
ng-change="updateAll(story)">
<label class="control-label">IncludeAll {{story}}</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="browser in browsers">
<input type="checkbox" value="{{browser}}"
ng-model="selection[story].browsers[browser]"
ng-change="checkChange(browser)"
> {{browser}}
</label>
</div>
</div>
<button type="button" data-ng-click="save()">Save</button>
<pre>{{selection | json}}</pre>
</form>
</body>
</html>
Here is my Controller
var app = angular.module("myApp",[]);
app.controller('detailContrller', function($scope){
$scope.stories = [];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
$scope.details = {};
var checked;
$scope.updateAll = function (story) {
checked = $scope.selection[story].all;
$scope.browsers.forEach(function (browser) {
$scope.selection[story].browsers[browser] = checked;
});
};
for(var i = 0; i< 3; i++) {
$scope.stories.push(i+1);
}
$scope.checkChange = function (browser) {
for(var i =0; i< $scope.stories.length; i++){
if(!$scope.stories[i].selected){
checked = false
return false;
}
}
}
angular.forEach($scope.stories, function(storgy) {
$scope.selection[storgy] = {
browsers: {}
};
});
$scope.save = function () {
console.log($scope.selection);
}
})
Your "include all" checkbox is trying to set .selectionAll property on a String (story in stories gives you a String).
You can't use ng-checked to somehow "work together" with ng-model. If you want your "include all" checkbox to select all subordinate checkboxes and vice versa, you'll need to watch the changes and provide some logic connecting the two things in your controller.
For example, if you want change of the "include all" checkbox value to influence other checkboxes, you'd have to do something like
<input type="checkbox" ng-model="selection[story].all" ng-change="updateAll(story)">
and in your controller
$scope.updateAll = function (story) {
var checked = $scope.selection[story].all;
$scope.browsers.forEach(function (browser) {
$scope.selection[story].browsers[browser] = checked;
});
};
and handle changes of the individual checkboxes in a similar fashion.
How do you make a parent div click propagate to its child checkbox in AngularJS? The Checkbox will have the hidden attribute, so we need to allow the parent div be the clickable entity.
HTML:
<body ng-app="checkboxApp">
<div ng-controller="MainController">
<h1>Hello Plunker!</h1>
<form name="myForm">
Value1:<input type="checkbox" ng-model="value1" /><br />
Value2:<input type="checkbox" value="value-2" ng-model="value2" ng-true-value="YES" ng-false-value="NO" /><br />
<tt>value1 = {{value1}}</tt><br />
<tt>value2 = {{value2}}</tt><br />
<hr />
<div class="btn btn-primary">
Value1 (hidden):<input type="checkbox" ng-model="value1" hidden/><br />
</div>
<div class="btn btn-primary" >
Value2:<input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO" /><br />
</div>
</form>
</div>
</body>
JS:
angular.module('checkboxApp', []);
angular.module('checkboxApp')
.controller('MainController', [ '$scope', function MainController($scope){
$scope.value1 = true;
$scope.value2 = 'YES'
}]);
Plnkr: here
I have tried a click function() as well on the ng-change, but I still can't get it working.
All you need to do is add an ng-click onto the parent div like this. This example would work if you did not use ng-true-value and ng-false-value.
<div class="btn btn-primary" ng-click="value1 = !value1>
Value1 (hidden):<input type="checkbox" ng-model="value1" hidden/><br />
</div>
<div class="btn btn-primary" ng-click="value2 = !value2>
Value2:<input type="checkbox" ng-model="value2"/><br />
</div>
Otherwise just use a function: ng-click="toggle(value2)"
$scope.toggle = function(val) {
if (val === "YES") {
val = "NO";
} else {
val = "YES";
}
}
Here is a Plunker