Angular Material Chips
home
Run
screen_rotation
fullscreen
cloud_download
navigate_before
navigate_next
<html lang="en" > <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <script language="javascript"> angular .module('myApp', ['ngMaterial']) .controller('myController', chipCtr); function chipCtr ($scope) { var self = this; self.readonly = false; //fruits list Variable object self.fruitNames = ['Apple', 'Banana', 'Mango']; self.roFruitNames = angular.copy(self.fruitNames); self.tags = []; self.newVeg = function(chip) { return { name: chip, type: 'unknown' }; }; } </script> </head> <body ng-app="myApp"> <div ng-controller="myController as ctrl" layout="column" ng-cloak> <md-content> <section layout="row" layout-sm="column" layout-align="center center" layout-wrap> <h2 class="md-title">Using a custom chip template.</h2> <form name="fruitForm"> <md-chips ng-model="ctrl.roFruitNames" name="fruitName" readonly="ctrl.readonly" md-removable="ctrl.removable" md-max-chips="6"> <md-chip-template> <strong>{{$chip}}</strong> <em>(fruit)</em> </md-chip-template> </md-chips> <div class="errors" ng-messages="fruitForm.fruitName.$error"> <div ng-message="md-max-chips">The maxmium number of chips reached.</div> </div> </form> <br/> <md-checkbox ng-model="ctrl.readonly">Readonly</md-checkbox> <md-checkbox ng-model="ctrl.removable"> Removable (<code>{{ctrl.removable === undefined ? 'undefined' : ctrl.removable}}</code>) </md-checkbox> <p class="md-caption"> <b>Note</b>: When md-removable is undefined, readonly automatically sets md-removable to false. </p> </section> </md-content> </div> </body> <style> .closeButton { position: relative; height: 24px; width: 24px; line-height: 30px; text-align: center; background: rgba(0, 0, 0, 0.3); border-radius: 50%; border: none; box-shadow: none; padding: 0; margin: 3px; transition: background 0.15s linear; display: block; } </style> </html>
<html lang="en" > <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <script language="javascript"> angular .module('myApp', ['ngMaterial']) .controller('myController', chipCtr); function chipCtr ($scope) { var self = this; self.readonly = false; //fruits list Variable object self.fruitNames = ['Apple', 'Banana', 'Mango']; self.roFruitNames = angular.copy(self.fruitNames); self.tags = []; self.newVeg = function(chip) { return { name: chip, type: 'unknown' }; }; } </script> </head> <body ng-app="myApp"> <div ng-controller="myController as ctrl" layout="column" ng-cloak> <md-content> <section layout="row" layout-sm="column" layout-align="center center" layout-wrap> <h2 class="md-title">Using a custom chip template.</h2> <form name="fruitForm"> <md-chips ng-model="ctrl.roFruitNames" name="fruitName" readonly="ctrl.readonly" md-removable="ctrl.removable" md-max-chips="6"> <md-chip-template> <strong>{{$chip}}</strong> <em>(fruit)</em> </md-chip-template> </md-chips> <div class="errors" ng-messages="fruitForm.fruitName.$error"> <div ng-message="md-max-chips">The maxmium number of chips reached.</div> </div> </form> <br/> <md-checkbox ng-model="ctrl.readonly">Readonly</md-checkbox> <md-checkbox ng-model="ctrl.removable"> Removable (<code>{{ctrl.removable === undefined ? 'undefined' : ctrl.removable}}</code>) </md-checkbox> <p class="md-caption"> <b>Note</b>: When md-removable is undefined, readonly automatically sets md-removable to false. </p> </section> </md-content> </div> </body> <style> .closeButton { position: relative; height: 24px; width: 24px; line-height: 30px; text-align: center; background: rgba(0, 0, 0, 0.3); border-radius: 50%; border: none; box-shadow: none; padding: 0; margin: 3px; transition: background 0.15s linear; display: block; } </style> </html>
Copyrights@tutorialsplane.com