带离子切换的离子输入插件代替按钮
Nor*_*ldt 5 javascript angularjs ionic-framework
我非常希望将项目输入插入与离子切换组合而不是按钮组合 - 因此用户可以选择禁用输入字段.
我想要的是这样的:
我希望将文本输入连接到模型,因此我总是有一个变量,Not Applicable或者是用户输入的其他字符串(或空).
但我的第一个问题是布局似乎陷入困境.这是我得到了多远:
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Text input">
</label>
<ion-toggle>
</ion-toggle>
</div>
</div>
给出以下混乱的布局
@Norfeldt：请检查下面的代码片段并让我知道您的想法。希望它能达到您的期望。
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>