Имеем примерно такой input:
<input type="number"
id="{{ variable.opt.name }}"
name = "{{ variable.opt.name }}"
min = "{{ variable.opt.min }}"
max = "{{ variable.opt.max }}"
step = "{{ variable.opt.step }}"
ng-model = "variable.opt.value">
Как можно сэмулировать действие "стрелочек вверх/вниз" у тега input[type="number"]?
Мои действия:
Скрыл их с помощью CSS:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type='number'] {
-moz-appearance: textfield;
}
Далее с помощью jQuery:
1. Подставляю свои стрелочки:
setTimeout(function () {
angular.element('input[type="number"]').each(function () {
var t = jQuery(this);
t.wrap('<div class="sb"></div>');
t
.before('<div class="sb-arrow sb-up"><i class="fl-up-arrow"></i></div>')
.after('<div class="sb-arrow sb-down"><i class="fl-down-arrow-2"></i></div>');
});
}, 100);
2. Произвожу такие манипуляции (Ловлю нажатие на стрелочку и просто заменяю значение):
angular.element('body').on('click', '.sb-arrow', function () {
var t = jQuery(this),
input = t.parent().children('input'),
step = (input.attr('step')) ? Number(input.attr('step')) : 1;
if (t.hasClass('sb-up')) {
input.val(Number(input.val()) + step);
console.log('click');
} else if (t.hasClass('sb-down')) {
input.val(Number(input.val()) - step);
}
});
И вроде бы как всё работает: циферки меняются.
НО! Изменения в модели не происходят.
Попробовал так:
angular.element('body').on('click', '.sb-arrow', function () {
var t = jQuery(this),
input = t.parent().children('input'),
step = (input.attr('step')) ? Number(input.attr('step')) : 1;
if (t.hasClass('sb-up')) {
var e = new jQuery.Event("keyup", { keyCode: 38 } );
input.trigger(e)
} else if (t.hasClass('sb-down')) {
input.val(Number(input.val()) - step);
}
});
Так вообще ничего не происходит.