Programming Steps: 203 Ionic1 Toggle: Nightly

Friday, June 2, 2017

203 Ionic1 Toggle: Nightly

Toggle: Nightly
code example:

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Toggles</title>

<body ng-controller="MainCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">
Toggles</h1>
</ion-header-bar>
             
    <ion-content>
      
      <div class="list">
        
        <div class="item item-divider">
 
          Settings
        </div>
<ion-toggle ng-repeat="item in settingsList"
                    ng-model="item.checked" 
                    ng-checked="item.checked">
          {{ item.text }}
        </ion-toggle>
        
        <div class="item">
          <pre ng-bind="settingsList | json"></pre>
</div>
<div class="item item-divider">
 
          Notifications
        </div>
<ion-toggle ng-model="pushNotification.checked"
                    ng-change="pushNotificationChange()">
          Push Notifications
        </ion-toggle>
        
        <div class="item">
          <pre ng-bind="pushNotification | json"></pre>
</div>
<ion-toggle toggle-class="toggle-assertive"
                    ng-model="emailNotification"
                    ng-true-value="'Subscribed'"
                    ng-false-value="'Unubscribed'">
          Newsletter
        </ion-toggle>
        
        <div class="item">
          <pre ng-bind="emailNotification | json"></pre>
</div>
</div>
</ion-content>
<script>
  angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope) {

$scope.settingsList = [
    { text: "Wireless", checked: true },
    { text: "GPS", checked: false },
    { text: "Bluetooth", checked: false }
  ];

$scope.pushNotificationChange = function() {
    console.log('Push Notification Change', $scope.pushNotification.checked);
  };
  
  $scope.pushNotification = { checked: true };
  $scope.emailNotification = 'Subscribed';
  
});
    </script>
  </body>
</html>

201706,20170602

Programming Steps

Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Friday, June 2, 2017

203 Ionic1 Toggle: Nightly

No comments:

Post a Comment