Angularjs listbox with checkbox example
Base on AngularJs Material I create a example for Angularjs listbox with checkbox as following image
How to do it?
Js
<script>
angular.module('MyForm', ['ngMaterial'])
.config(function($mdIconProvider) {
$mdIconProvider
.iconSet('social', 'img/icons/sets/social-icons.svg', 24)
.iconSet('device', 'img/icons/sets/device-icons.svg', 24)
.iconSet('communication', 'img/icons/sets/communication-icons.svg', 24)
.defaultIconSet('img/icons/sets/core-icons.svg', 24);
})
.controller('ListCtrl', function($scope, $mdDialog) {
$scope.liststudent= [
{ name: 'Kevin', isgirl: false },
{ name: 'Sara', isgirl: true},
{ name: 'Bob', isgirl: false },
{ name: 'Laura', isgirl: true },
{ name: 'Peter', isgirl: false }
];
});
</script>
HTML
<md-list ng-cloak="" ng-controller="ListCtrl">
<md-subheader class="md-no-sticky">Student list</md-subheader>
<md-list-item ng-repeat="topping in liststudent">
{{ topping.name }} <br />
<md-checkbox class="md-secondary" ng-model="topping.isgirl"></md-checkbox>
</md-list-item>
<md-divider></md-divider>
<md-list>
Full code
<html>
<head>
<title>Angular JS Directive</title>
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" rel="stylesheet"></link>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style type="text/css">
.listdemoListControls md-divider {
margin-top: 10px;
margin-bottom: 10px; }
.listdemoListControls md-list-item > p, .listdemoListControls md-list-item > .md-list-item-inner > p, .listdemoListControls md-list-item .md-list-item-inner > p, .listdemoListControls md-list-item .md-list-item-inner > .md-list-item-inner > p {
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Likely future */ }
</style>
</head>
<body ng-app="MyForm">
<md-list ng-cloak="" ng-controller="ListCtrl">
<md-subheader class="md-no-sticky">Student list</md-subheader>
<md-list-item ng-repeat="topping in liststudent">
{{ topping.name }} <br />
<md-checkbox class="md-secondary" ng-model="topping.isgirl"></md-checkbox>
</md-list-item>
<md-divider></md-divider>
<md-list>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
<script>
angular.module('MyForm', ['ngMaterial'])
.config(function($mdIconProvider) {
$mdIconProvider
.iconSet('social', 'img/icons/sets/social-icons.svg', 24)
.iconSet('device', 'img/icons/sets/device-icons.svg', 24)
.iconSet('communication', 'img/icons/sets/communication-icons.svg', 24)
.defaultIconSet('img/icons/sets/core-icons.svg', 24);
})
.controller('ListCtrl', function($scope, $mdDialog) {
$scope.liststudent= [
{ name: 'Kevin', isgirl: false },
{ name: 'Sara', isgirl: true},
{ name: 'Bob', isgirl: false },
{ name: 'Laura', isgirl: true },
{ name: 'Peter', isgirl: false }
];
});
</script>
</md-list></md-list></body>
</html>
Demo
nice blog for learning angular js
ReplyDeleteThanks for the post. It was very interesting and meaningful. I really appreciate it! Keep updating stuff like this.
ReplyDeleteBest Angular Online Training in Pune, Mumbai, Delhi NCR
This is most informative and also this post most user friendly and super navigation to all posts.
ReplyDeleteOnline Demo Sessions
AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.black and red suit salwar , black and red salwar suit ,
ReplyDelete