Wie erstellen Sie ein Eingabefeld mit einem + und - Knopf in Ionic

Question

Wie kann ich ein Eingabefeld mit einem + und - Knopf erstellen. Ein Klick auf die Benutzer kann die Menge des Produkts ändern ausgewählt, wie dieser Bildschirm:

Answer 1

Hier ist ein schnell zusammengeworfen Beispiel für Ionic 2. Wenn Sie 1 Ionic verwenden, sollten Sie in der Lage sein, es zu adaptieren ziemlich leicht .

Sie benötigen nur ein paar Controller-/Klassenfunktionen zum Inkrementieren und Dekrementieren, und rufen Sie diese dann über die Schaltflächen an. Dieses Beispiel deckt nur eine Taste, so etwas wie wickelte diese in einem ngFor oder ein <ion-list>

page.ts:

private currentNumber = 0; 
constructor() { } 

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

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

seite.html:

<ion-icon name="remove-circle" (click)="decrement()"> 
{{currentNumber}} 
<ion-icon name="add-circle" (click)="increment()"> 

Answer 2

Wie für ionische v.1 bei Ihrer Vorlage könnten Sie folgendes haben:

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

An 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 in Ihrem Controller

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

$scope.add = function(i) { 
    i.quantity++; 
}