Search example

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

2 comments:

  1. I would like to see each release announced on this blog, your way of explaining is very nice I have gone through custom directives in Angular Js online training I had spent several days to get the hang of Angular JS was successful .

    angular online training in hyderabad
    angular online training

    ReplyDelete



Popular Posts