Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to use switches in AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.18k
    Comment on it

    The md-switch which is a Angular directive can be used to show a switch in your angular application.

    These are the attributes:

    1. * ng-model -  bind data.
    2. name - It is the name of property in the form under which the control is published.
    3. ng-true-value - It is the value which has the expression that is set when selected by user.
    4. ng-false-value - It is the value which has the expression that is set when not selected by user.
    5. ng-change - It is an angular expression that is executed when there are some changes with input element by user.
    6. ng-disabled - It is used to disable any button or input element.
    7. md-no-ink - It is used to make ripple ink effects.
    8. aria-label - It publish the button label used by screen-readers for accessibility. by default to the switch's text.

    Example:
    HTML:
     

    <html lang="en" >
       <head>
          <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
          <script src="https://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">
       </head>
       <body ng-app="firstApplication">
          <div id="switchContainer" ng-controller="switchController as ctrl" layout="column" ng-cloak>
             <md-switch ng-model="data.switch1" aria-label="Switch 1">
                Switch 1: {{ data.switch1 }}
             </md-switch>
             <md-switch ng-model="data.switch2" aria-label="Switch 2" ng-true-value="'true'" ng-false-value="'false'" class="md-warn">
                Switch 2 (md-warn): {{ data.switch2 }}
             </md-switch>
             <md-switch ng-disabled="true" aria-label="Disabled switch" ng-model="disabledModel">
                Switch 3 (Disabled)
             </md-switch>
             <md-switch ng-disabled="true" aria-label="Disabled active switch" ng-model="data.switch4">
                Switch 4 (Disabled, Active)
             </md-switch>
             <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="data.switch5">
                Switch 5 (md-primary): No Ink
             </md-switch>
             <md-switch ng-model="data.switch6" aria-label="Switch 6" ng-change="onChange(data.switch6)">
                Switch 6 : {{ message }}
             </md-switch>    
          </div>
       </body>
    </html>

    JS:
     

    angular
                .module('firstApplication', ['ngMaterial'])
                .controller('switchController', switchController);
    
              function switchController ($scope) {
                 $scope.data = {
                    switch1: true,
                    switch2: false,
                    switch3: false,
                    switch4: true,
                    switch5: true,
                    switch6: false
                 };
                 $scope.message = 'false';
                 $scope.onChange = function(state) {
                    $scope.message = state;
                 };
              }      

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: