Angularjs listbox with checkbox

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



4 comments:

  1. Thanks for the post. It was very interesting and meaningful. I really appreciate it! Keep updating stuff like this.
    Best Angular Online Training in Pune, Mumbai, Delhi NCR

    ReplyDelete
  2. This is most informative and also this post most user friendly and super navigation to all posts.
    Online Demo Sessions

    ReplyDelete
  3. 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

Popular Posts