Menu
I would very much like to combine an item-input-inset with an ion-toggle instead of the button - so the user can choose to disable the input field.
What I want is something like this:
I do wish to connect the text input to a model so I always have a variable that is Not Applicable or some other string that the user entered (or empty).
But my first problems has been the layout that seems to mess up. This is how far I got:
<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 messed up layout
973
@Norfeldt: Please check 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>Hope it will help you.
Required CSS
.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 this plunker http://codepen.io/anon/pen/XKzaBo
23
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
