How create an input box having a + and - button in Ionic
As for ionic v.1 at your template you could have something like:
<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>
At your css
.red:before {
color: red;
}
.green:before {
color: green;
}
.flex_row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
And in your controller
$scope.sub = function(i) {
i.quantity--;
}
$scope.add = function(i) {
i.quantity++;
}
Here's a quickly thrown together example for Ionic 2. If you are using Ionic 1 you should be able to adapt it pretty easily.
You just need a couple controller/class functions to increment and decrement, then call those on tap from the buttons. This example covers just one button, so something like this wrapped in an ngFor
or a <ion-list>
page.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()">