Geek Answers Handbook

Ion input with ion switch instead of button

I would really like to combine item-input-inset with ion-toggle instead of a button - so the user can disable the input field.

I want something like this:

enter image description here

I want to connect text input to the model, so I always have the Not Applicable variable or some other line entered by the user (or empty).

But my first problem was the layout, which seems to ruin it. Here is how I guessed:

  <div class="item item-input-inset"> <label class="item-input-wrapper"> <input type="text" placeholder="Text input"> </label> <ion-toggle> </ion-toggle> </div> </div>

gives the following spoiled layout

enter image description here

+5
source share
3 answers

@Norfeldt: Please view the snippet below and let me know your thought. Hope it works as your expectation.

 angular.module('ionicApp', ['ionic']) .controller('MainCtrl', function($scope) { //INIT checked false $scope.toggleInput = { checked: false }; $scope.toggleInputChange = function() { //TO DO }; }); 
 body { cursor: url('http://ionicframework.com/img/finger.png'), auto; } .item-toggle .toggle { top: 18px !important; } .item-toggle input[type='text'] { pointer-events: all; padding-left: 10px; width: 100%; color: #000; font-weight: 500; } .item-toggle input[type="text"]:disabled { font-weight: 100; background: #fff; } 
 <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <body ng-app="ionicApp"> <div ng-controller="MainCtrl"> <ion-content> <ion-toggle ng-model="toggleInput.checked" ng-change="toggleInputChange()"> <input ng-disabled="!toggleInput.checked" type="text" ng-model="userInput.value" placeholder="{{toggleInput.checked ? 'This is the user input...' : 'Not Applicable' }}"> </ion-toggle> </ion-content> </div> </body>
+4
source

Hope this helps you.

CSS Needed

 .item-toggle input[type='text'] { pointer-events: all; }

Template Code:

 <ion-content> <ion-toggle ng-model="pushNotification.checked" ng-change="pushNotificationChange()"> <input ng-disabled="!pushNotification.checked" type="text" ng-model="userInput.value" placeholder="{{placeholder}}"> </ion-toggle> </ion-content>

Controller code

 var temp = ''; $scope.placeholder = 'Not Applicable'; $scope.pushNotificationChange = function() { if($scope.pushNotification.checked) { $scope.userInput.value = temp; } else { temp = $scope.userInput.value; $scope.userInput.value = ''; } }; $scope.pushNotification = { checked: false }; $scope.userInput = {value:''};

Check out this plunker http://codepen.io/anon/pen/XKzaBo

+2
source

I suggest you apply the following CSS:

 .item-toggle { padding: 0; border-width: 0; } .item-toggle .toggle { position: inherit; top: inherit; right: inherit; }

See http://play.ionic.io/app/8a0cf8a27f4e .

+1
source

More articles:


All Articles