离子输入插入带离子切换而不是按钮答案

【问题标题】：ionic input insert with ion-toggle instead of button离子输入插入带离子切换而不是按钮
【发布时间】：2016-07-10 14:08:32
【问题描述】：

我非常希望将item-input-inset 与ion-toggle 组合起来，而不是按钮——因此用户可以选择禁用输入字段。

我想要的是这样的：

我确实希望将文本输入连接到模型，所以我总是有一个变量 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>

给出了以下混乱的布局

【问题讨论】：

笨蛋？还是 item-input-wrapper 的 css 代码？
已经有一些答案了，看看@Norfeldt

标签： javascript angularjs ionic-framework

【解决方案1】：

@Norfeldt：请检查下面的 sn-p，让我知道您的想法。希望它能如你所愿。

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>

【讨论】：

这是一个非常好的答案。谢谢。在 StackOverflow 上看起来不错。只需要用离子测试它
移动应用上的情况如何？我刚从假期回来：D
不得不稍微修改你的代码以获得我想要的，但你帮助我归档了目标。感谢您的帮助和时间。
是否可以在占位符的表达式中使用变量，例如{{toggleInput.checked ? '{{foo}}' : 'Not Applicable' }}？
如果你的控制器有 $scope.foo。让它成为 {{toggleInput.checked ？ foo : '不适用' }}

【解决方案2】：

希望对你有所帮助。

必需的 CSS

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

模板代码：

<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>

控制器代码

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:''};

检查这个 plunker http://codepen.io/anon/pen/XKzaBo

【讨论】：

【解决方案3】：

我建议你应用以下 CSS：

.item-toggle {
    padding: 0;
    border-width: 0;
}

.item-toggle .toggle {
    position: inherit;
    top: inherit;
    right: inherit;
}

见http://play.ionic.io/app/8a0cf8a27f4e。

【讨论】：