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

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

    AngularJS Training in Chennai

    ReplyDelete

Popular Posts