Angular Get Values Bind Multiple Checkbox Selected

Angular Get Values Bind Multiple Checkbox Selected

Today, We want to share with you Angular Get Values Bind Multiple Checkbox Selected.
In this post we will show you Retrieve Multiple Checkbox Selected in Angularjs, hear for Check uncheck all Multiple Checkboxes with AngularJS we will give you demo and example for implement.
In this post, we will learn about Angularjs Bind Multi-Checkbox with an example.

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.For Retrieve Multiple Checkbox Selected in Angularjs

get multiple checked checkbox value in angularjs

index.html

<title></title>




.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="chkSelectionFunc(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.selection=[];
		$scope.chkSelectionFunc = function chkSelectionFunc(Languages_name) {
	    var idx = $scope.selection.indexOf(Languages_name);

	    if (idx > -1) {
	      $scope.selection.splice(idx, 1);
	    }
	    else {
	      $scope.selection.push(Languages_name);
	    }
	  };
});

Here infinityknow Team has explained with example, how to use simple AngularJS to get all the list multiple selected Text in check and Value of HTML Multiple check-box-ckbox Select ListBox when Button is clicked all the value using ng-click directive.

Example 1

Example 2