feat(ionicToggle): allow ngDisabled binding

ionic-team · Feb 6, 2014 · 0fe4486 · 0fe4486
1 parent e96a77e
commit 0fe4486
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/js/ext/angular/src/directive/ionicToggle.js b/js/ext/angular/src/directive/ionicToggle.js
@@ -15,13 +15,14 @@ angular.module('ionic.ui.toggle', [])
       ngModel: '=?',
       ngValue: '=?',
       ngChecked: '=?',
-      ngChange: '&'
+      ngChange: '&',
+      ngDisabled: '=?'
     },
     transclude: true,
     template: '<div class="item item-toggle disable-pointer-events">' +
                 '<div ng-transclude></div>' +
                 '<label class="toggle enable-pointer-events">' +
-                  '<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
+                  '<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()" ng-disabled="ngDisabled">' +
                   '<div class="track disable-pointer-events">' +
                     '<div class="handle"></div>' +
                   '</div>' +
@@ -34,6 +35,7 @@ angular.module('ionic.ui.toggle', [])
       if(attr.ngChecked) input.attr('ng-checked', 'ngChecked');
       if(attr.ngTrueValue) input.attr('ng-true-value', attr.ngTrueValue);
       if(attr.ngFalseValue) input.attr('ng-false-value', attr.ngFalseValue);
+      if(attr.ngDisabled) input.attr('ng-false-value', attr.ngFalseValue);
 
       // return function link($scope, $element, $attr, ngModel) {
       //   var el, checkbox, track, handle;
@@ -43,7 +45,7 @@ angular.module('ionic.ui.toggle', [])
       //   track = el.children[1];
       //   handle = track.children[0];
 
-      //   $scope.toggle = new ionic.views.Toggle({ 
+      //   $scope.toggle = new ionic.views.Toggle({
       //     el: el,
       //     track: track,
       //     checkbox: checkbox,

diff --git a/js/ext/angular/test/toggle.html b/js/ext/angular/test/toggle.html
@@ -0,0 +1,37 @@
+<html ng-app="toggleTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Radio</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/angular/angular.js"></script>
+    <script src="../../../../dist/js/angular/angular-animate.js"></script>
+    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
+    <script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+  </head>
+  <body>
+
+    <header class="bar bar-header bar-danger">
+      <h1 class="title">Toggle</h1>
+    </header>
+    <content has-header="true" class="reveal-animation">
+      <div ng-controller="TestCtrl">
+
+        <div class="list">
+          <toggle ng-model="myModel" ng-disabled="isDisabled">myModel ({{!!myModel}})</toggle>
+          <toggle ng-model="isDisabled">Disable myModel ({{!!isDisabled}})</toggle>
+        </div>
+      </div>
+    </content>
+
+    <script>
+      angular.module('toggleTest', ['ionic'])
+      .controller('TestCtrl', function($scope) {});
+    </script>
+  </body>
+</html>
+