iNickolay
@iNickolay

Как сэмулировать действие spin buttons тега input [type="number"]?

Имеем примерно такой 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);
    }
});

Так вообще ничего не происходит.
  • Вопрос задан
  • 343 просмотра
Решения вопроса 1
iNickolay
@iNickolay Автор вопроса
Всё решилось с помощью использования директивы.
Код получился примерно такой:

sb-input.js
(function () { 'use strict';

    var sbInput = function () { return {
        restrict: 'E',
        scope: {
            variable: '='
        },
        templateUrl: '/templates/sb-input.html',
        link: function(scope) {
            console.log(scope);
            scope.up = function ()   { scope.variable.opt.value += scope.variable.opt.step; };
            scope.down = function () { scope.variable.opt.value -= scope.variable.opt.step; };
        }
    };};

    angular
        .module('myApp')
        .directive('sbInput', sbInput);

})();


sb-input.html
<div class="sb">
    <div class="sb-arrow sb-up" ng-click="up()"><i class="fl-up-arrow"></i></div>
    <input type="number" min="{{ variable.opt.min }}" max="{{ variable.opt.max }}" step="{{ variable.opt.step }}" ng-model="variable.opt.value">
    <div class="sb-arrow sb-down" ng-click="down()"><i class="fl-down-arrow-2"></i></div>
</div>


Ну и пример вызова:
<sb-input variable="variable"></sb-input>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Так попробуйте сделать изменение прямо в модели.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы