Introduction: In this article I am going to explain how
to populate checkbox list using ng-repeat in AngularJS.
In previous articles i explained
Implementation: Let’s create a sample page for
demonstration purpose.
<html>
<head>
<title>Bind CheckBoxList using ng-repeat 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'
}, {
BookId: '2',
BookName: 'The
lord of the rings'
}, {
BookId: '3',
BookName: 'The Hobbit'
}, {
BookId: '4',
BookName: 'The little prince'
}, {
BookId: '5',
BookName: 'Angels and Demons'
}];
});
</script>
<div ng-app="testapp" ng-controller="testcontroller">
<fieldset style="width: 270px; height: 120px;">
<legend>Bind CheckBoxList in AngularJS</legend>
<div ng-repeat="Book in
BookList">
<input type='checkbox' value="{{Book.BookId}}" />
<label>{{Book.BookName}}</label>
</div>
</fieldset>
</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.
1 comments:
Click here for commentsThanks for you feedback..I am glad you liked this article..stay connected and keep reading...
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..