Angular Retrieve Multiple Checkbox Selected Options
Today, We want to share with you Angular Retrieve Multiple Checkbox Selected Options.
In this post we will show you Retrieve Multiple Checkbox Selected Options using AngularJS, hear for AngularJS : Retrieve Multiple Checkbox Selected Options we will give you demo and example for implement.
In this post, we will learn about How to get multiple CheckBox checked value in AngularJS with an example.
In this Post we will easy to explain with demo or example, how to use simple AngularJS to get multiple or single selected Text checkbox and Value of HTML Multiple checkbox ListBox when Button is simple clicked using ng-checked directive.
In simple syntax of Angular one checkbox
is linked all with one model like as a mycheck. But in practice example we usually want simple one model to store all the array of checked checkbox check-box-ckbox values from several all the checkboxes. Checklist-model simple solves that all the dynemically task without additional script code in angularjs controller. You should all the play with elements and attributes of
tag:
How To Retrieve All the Multiple Checkbox Values and id And Get Checked (true or false) Here I Stored all the Checkbox Values In Single or more Column Database
index.html
<title>Retrieve Multiple Checkbox Selected Options using AngularJS</title>
<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js">https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js</a>
<a href="http://app.js">http://app.js</a>
.ckbox
{
width: 60%;
margin-right: 19%;
margin-left: 19%;
background-color: #3E5B9A!important;
border-color: #e2e2e2;
border: 1px solid transparent;
height: 380px;
color:white;
}
.action-checkbox
{
padding-left: 25%;
margin-top: 50px;
margin-bottom: 31px;
line-height: 11px;
display: inline;
}
.check-box-ckbox
{
width: 150px;
float: left;
display: inline;
margin-top: 31px;
margin-left: 31px;
border-style: dotted;
padding-top: 11px;
padding-bottom: 11px;
}
.ck-selected-products-ckbox
{
margin-left: 201px;
margin-top: 18%;
margin-right:11px;
}
.ck-selected-product
{
display:inline;
margin-right:11px;
font-size:16px;
color:turquoise;
font-family:Trebuchet MS;
}
input[type=checkbox] { display:none; }
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
}
input[type=checkbox] + label:before { content: "\f096"; }
input[type=checkbox] + label:before { letter-spacing: 11px; }
input[type=checkbox]:checked + label:before { content: "\f046";color:turquoise; }
input[type=checkbox]:checked + label:before { letter-spacing: 6px; }
<div class="ckbox">
<h3 style="text-align:center">Retrieve Multiple Checkbox Selected in Angularjs</h3>
<p style="text-align:center;font-family:Tahoma">Demo by infinityknow.com - Tutorial @ <a href="parent.window.location.href=''" style="color:turquoise">infinityknow.com</a></p>
<div class="check-box-ckbox">
<div>
<div class="action-checkbox">
-1" ng-click="projectToggleFun(project.name)" />
<label for="{{project.name}}"></label>
{{project.name}}
</div>
</div>
</div>
<div class="ck-selected-products-ckbox">
<span style="color:white" class="ck-selected-product">Selected Programming Languages:<span>
<div class="ck-selected-product">
{{name}}
</div>
</div>
</div>
app.js
var myApp = angular.module('myApp', []);
myApp.controller('ckCtrl', function ($scope) {
$scope.projects=[{name:'PHP', grade:25, lcode:'0015'},
{name:'Laravel', grade:30, lcode:'0041'},
{name:'Mgradento', grade:28, lcode:'0041'},
{name:'Mysql', grade:15, lcode:'0041'},
{name:'ASP.net', grade:28, lcode:'0041'},
{name:'HTML 5', grade:95, lcode:'0015'},
{name:'CSS', grade:50, lcode:'0015'},
{name:'Vuejs', grade:27, lcode:'0041'},
{name:'Angularjs', grade:40, lcode:'0015'},
{name:'NodeJS', grade:60, lcode:'0041'}];
$scope.langSelect=[];
$scope.projectToggleFun = function projectToggleFun(projectLanguagesName) {
var idx = $scope.langSelect.indexOf(projectLanguagesName);
if (idx > -1) {
$scope.langSelect.splice(idx, 1);
}
else {
$scope.langSelect.push(projectLanguagesName);
}
};
});
