jonowa wkładka wejściowa z przełącznikiem jonowym zamiast przycisku

Bardzo chciałbym połączyć item-input-inset z ion-toggle zamiast przycisku - aby użytkownik mógł wyłączyć pole wejściowe.jonowa wkładka wejściowa z przełącznikiem jonowym zamiast przycisku

Co chcę jest coś takiego:

I chcą połączyć wprowadzania tekstu do modelu, więc zawsze mieć zmienną, która jest Not Applicable lub inny ciąg znaków, które użytkownik wprowadził (lub pusty).

Ale moim pierwszym problemem był układ, który wydaje się zepsuć. Jest to, jak daleko mam:

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

daje następujące zawiedli układ

Źródło

2016-07-10 Norfeldt

Plunker? lub kod css dla elementu-opakowania-opakowania? –

Istnieje już kilka odpowiedzi, sprawdź to @Norfeldt – trungk18

@Norfeldt: Sprawdź poniższy fragment i daj znać swojej myśli. Mam nadzieję, że to działa jak oczekiwanie.

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>

Źródło

2016-07-13 11:04:20 trungk18

To jest naprawdę dobra odpowiedź .. Dziękuję. Wygląda dobrze na StackOverflow. Wystarczy przetestować go z jonowym – Norfeldt

Jak to działa w aplikacji mobilnej? Właśnie wróciłem z wakacji: D – trungk18

musiał trochę zmodyfikować twój kod, aby uzyskać to, co chciałem, ale pomogłeś mi zarchiwizować cel. Dziękuję za pomoc i czas. – Norfeldt

Proponuję zastosować następującą CSS:

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

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

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

Źródło

2016-07-12 17:47:30

Mam nadzieję, że ci to pomoże.

Wymagane CSS

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

Kod Szablon:

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

kod kontrolera

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

Sprawdź to pl unker http://codepen.io/anon/pen/XKzaBo

Źródło

2016-07-12 18:52:06 Samir

jonowa wkładka wejściowa z przełącznikiem jonowym zamiast przycisku

Odpowiedz

Powiązane problemy