Wie erstellen Sie ein Eingabe-Feld mit einem + und - Taste im Ionischen

Wie kann ich erstellen ein input-Feld mit einer + und - Taste. Klick auf die Benutzer ändern können, die Menge des Produktes ausgewählt, wie dieser Bildschirm:

Wie erstellen Sie ein Eingabe-Feld mit einem + und - Taste im Ionischen

InformationsquelleAutor Ramos | 2016-08-09
  1. 3

    Hier ein schnell zusammen geworfen Beispiel für Ionic-2. Wenn Sie mit Ionischen 1 Sie sollten in der Lage sein, um eine Anpassung ziemlich leicht.

    Brauchen Sie nur ein paar controller/Klasse Funktionen zum Inkrementieren und Dekrementieren, dann rufen Sie diese auf Tippen von den Tasten. Dieses Beispiel deckt nur einen Knopf, also so etwas wie das verpackt in eine ngFor oder eine <ion-list>

    Seite.ts:

    private currentNumber = 0;
constructor () { }

private increment () {
  this.currentNumber++;
}

private decrement () {
  this.currentNumber--;
}

    page.html:

    <ion-icon name="remove-circle" (click)="decrement()">
{{currentNumber}}
<ion-icon name="add-circle" (click)="increment()">
    • Und wer nicht erlauben, den Wert < 0?
    • Wie kann ich eine Sub-Total in der Kopfzeile?
    • Um zu verhindern, dass der Wert von gong unter null: private decrement () { if (dies.currentNumber > 0) { dieses.currentNumber--; } }
    • Für die Teilsumme, erstellen Sie einfach eine Funktion hinzufügen, legen Sie das Ergebnis in eine Variable wie diese.Teilsumme, dann zeigen Sie, dass in der Vorlage mit {{Teilergebnis}}
    • Vielen Dank, Super!!!
    • Wenn Sie wickeln Sie diese in eine Liste, die alle Werte erhöht oder decresed mit dieser Antwort. Sollte es zu verringern oder zu erhöhen, nur das aktuelle Element.

    InformationsquelleAutor amuramoto
  2. 3

    Als für Ionische v. 1 auf Ihrer Vorlage, die Sie haben könnte so etwas wie:

    <div class="flex_row">
  <button class="button icon ion-minus-circled red" ng-click="sub(item)">
  <p> {{item.quantity}} </p>
  <button class="button icon ion-plus-circled green" ng-click="add(item)">
</div>

    In Ihrem css -

        .red:before {
    color: red;
    }

    .green:before {
    color: green;
    }

    .flex_row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row; 
    flex-direction: row;
    }

    Und im controller

    $scope.sub = function(i) {
  i.quantity--;
}

$scope.add = function(i) {
  i.quantity++;
}
    InformationsquelleAutor Korte
Schreibe einen Kommentar