Introduction: In this article I am going
to explain how to populate HTML checkboxlist using ng-repeat and get selected
items text and values in comma separated format.
In previous articles i explained How to Bind dropdownlist value and text using ng-repeat in Angularjs and Bind dropdownlist and get selected item value and text and Jquery and json to bind gridview from sql server database in asp.net and Jquery ajax json example in asp.net to insert data into sql server database without postback and Maintain bootstrap selected tab on postback in asp.net inside ajax updatepanel
Implementation:
Let’s create a sample html page to bind checkbox list and get selected item
text and values in string delimited form.
<html>
<head>
<title>Bind CheckBoxList and get selected item text and values in
AngularJS </title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('testapp', [])
app.controller('testcontroller', function ($scope) {
$scope.BookList = [{
BookId: '1',
BookName: 'Harry Porter',
checked: false
}, {
BookId: '2',
BookName: 'The lord of the rings',
checked: false
}, {
BookId: '3',
BookName: 'The Hobbit',
checked: false
}, {
BookId: '4',
BookName: 'The little prince',
checked: false
}, {
BookId: '5',
BookName: 'Angels and Demons',
checked: false
}];
$scope.Checked = function () {
$scope.Checkedval = "";
$scope.CheckedId = "";
$scope.spn = false;
angular.forEach($scope.BookList, function (value, key) {
if (value.checked) {
$scope.spn = true;
if ($scope.Checkedval.length ==
0) {
$scope.Checkedval =
value.BookName;
$scope.CheckedId =
value.BookId;
}
else {
$scope.Checkedval
+= ", " + value.BookName;
$scope.CheckedId +=
", " + value.BookId;
}
}
});
}
});
</script>
<div ng-app="testapp" ng-controller="testcontroller">
<fieldset style="width: 400px; height: 120px;">
<legend>Get Checkboxlist selected item in comma separeated format</legend>
<div ng-repeat="Book in
BookList">
<input ng-model="Book.checked" type='checkbox' value="{{Book.BookId}}" ng-click='Checked()' />
<label>{{Book.BookName}}</label>
</div>
</fieldset>
<span ng-show='spn'>Selected Book Ids: {{CheckedId}}</span><br />
<span ng-show='spn'>Selected Books: {{Checkedval}}</span>
</div>
</body>
</html>
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..