Как создать поле ввода с кнопками + и - в Ionic
Как я могу создать поле ввода, имеющее кнопки + и -. Нажав, какой пользователь может изменить количество выбранного продукта, как на этом экране:
Ответы на вопрос(2)
Решение Вопроса
Вот краткий пример для Ionic 2. Если вы используете Ionic 1, вы сможете легко его адаптировать.
Вам просто нужно несколько функций контроллера / класса, чтобы увеличивать и уменьшать их, а затем вызывать их с помощью кнопок. Этот пример охватывает только одну кнопку, поэтому что-то вроде этого, завернутое вngFor или<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()">
А кому не разрешают значение <0?
Спасибо, отлично!
Как я могу поместить промежуточный итог в заголовок?
Чтобы значение gong было ниже нуля: private decment () {if (this.currentNumber> 0) {this.currentNumber--; }}
Если вы включите это в список, все значения будут увеличены или уменьшены с этим ответом. Следует уменьшать или увеличивать только текущий элемент.
Для промежуточного итога, просто создайте функцию для их добавления, установите результат в переменную наподобие this.subtotal, а затем покажите это в шаблоне с {{subtotal}}
Что касается ionic v.1 в вашем шаблоне, вы можете получить что-то вроде:
<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>
На твой css
.red:before {
color: red;
}
.green:before {
color: green;
}
.flex_row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
И в вашем контроллере
$scope.sub = function(i) {
i.quantity--;
}
$scope.add = function(i) {
i.quantity++;
}