Question

我非常希望将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>

给出以下混乱的布局

Answer 1

@Norfeldt：请查看下面的代码段，让我知道你的想法。希望它符合您的期望。

＆＃13;

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope) {
  //INIT checked false
  $scope.toggleInput = {
    checked: false
  };
  $scope.toggleInputChange = function() {
    //TO DO
  };
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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

Answer 3

我建议您应用以下CSS：

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

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

请参阅http://play.ionic.io/app/8a0cf8a27f4e。

具有离子切换的离子输入插入而不是按钮

3 个答案: