Chèn đầu vào ion với nút chuyển ion thay vì nút

Tôi rất muốn kết hợp một item-input-inset với một nút ion-toggle thay vì nút - để người dùng có thể chọn vô hiệu hóa trường nhập.Chèn đầu vào ion với nút chuyển ion thay vì nút

Những gì tôi muốn là một cái gì đó như thế này:

Tôi muốn kết nối đầu vào văn bản đến một mô hình vì vậy tôi luôn có một biến đó là Not Applicable hay một số chuỗi khác mà người dùng nhập (hoặc trống).

Nhưng vấn đề đầu tiên của tôi là bố cục có vẻ lộn xộn. Đây là cách xa tôi nhận:

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

cung cấp cho các sai lầm bố trí sau

Nguồn

2016-07-10 Norfeldt

Plunker? hoặc mã css cho mục-đầu vào-wrapper? –

Đã có một số câu trả lời rồi, hãy xem qua @Norfeldt – trungk18

@Norfeldt: Vui lòng kiểm tra đoạn mã bên dưới và cho tôi biết suy nghĩ của bạn. Hy vọng nó hoạt động như mong đợi của bạn.

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>

Nguồn

2016-07-13 11:04:20 trungk18

Đây là câu trả lời thực sự tốt .. Cảm ơn bạn. Có vẻ tốt trên StackOverflow. Chỉ cần kiểm tra nó với ionic – Norfeldt

Làm thế nào điều này xảy ra trên ứng dụng di động? Tôi vừa trở về sau kỳ nghỉ: D – trungk18

phải sửa đổi mã của bạn một chút để có được những gì tôi muốn, nhưng bạn đã giúp tôi lưu trữ mục tiêu. Cảm ơn bạn đã giúp đỡ và thời gian của bạn. – Norfeldt

Tôi đề nghị bạn áp dụng CSS sau đây:

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

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

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

Nguồn

2016-07-12 17:47:30

Hy vọng nó sẽ giúp bạn.

buộc CSS

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

Mẫu Mã số:

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

điều khiển Mã

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

Kiểm tra pl này unker http://codepen.io/anon/pen/XKzaBo

Nguồn

2016-07-12 18:52:06 Samir

Chèn đầu vào ion với nút chuyển ion thay vì nút

Trả lời

Các vấn đề liên quan