Двунаправленная привязка AngularJS для ввода десятичного числа

У меня есть HTML-вход, который я привязываю к десятичной цифре. Проблема в том, что попытка ввода десятичной точки не появляется. Но если я «вытаскиваю» каретку в середину цифр, то нажимаю «.», Затем она вставляет ее, но затем она обрезает остальную часть теста после чисел. Десятичные нажатия клавиш действительно делают странные вещи в разных ситуациях.Двунаправленная привязка AngularJS для ввода десятичного числа

<table id="readings" class="table table-condensed table-striped table-hover"> 
<tbody> 
    <tr data-ng-repeat="rdg in vm.readings"> 
     <td>{{rdg.Value}} {{rdg.Uom}}</td> 
     <td> 
      <div class="input-group input-group-sm" style="width: 100%"> 
       <input class="form-control" data-ng-model="rdg.ManualValue" 
         placeholder="Manual..." />            
      </div> 

     </td> 
    </tr> 
</tbody> 
</table>

rdg.ManualValue это число, которое я понимаю пинает этой дополнительной проверки номера в AngularJS, независимо от типа «» ввода. Но есть ли способ получить «естественно» десятичный знак? т.е. когда вы вводите их?

Бонусный вопрос: есть ли способ спрятать число прядильщиков в любом номере?

Спасибо за любой совет. Кори.

источник

2014-12-09 cardinalPilot

Стадии = тип «0,01» = «число» атрибуты позволит для входов, чтобы принять десятичные просто отлично, но вам нужно будет связать какое-то обычай Javascript в поле, чтобы иметь символы добавляются автоматически. – KreepN

Попробуйте эту угловую директиву. Очень простая и простая в использовании. http://javabypatel.blogspot.in/2015/12/number-range-spinner-angularjs-directive.html – Jayesh

Попробуйте <input class="form-control" data-ng-model="rdg.ManualValue" placeholder="Manual..." step="any" type="number" />

Для прячась Использовать номер Spinner этого CSS:

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { 
    /* display: none; <- Crashes Chrome on hover */ 
    -webkit-appearance: none; 
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ 
}

источник

2014-12-09 22:14:15

Мне пришлось добавить: input [type = number] { -moz-appearance: текстовое поле; }, и теперь он работает в FireFox. – cardinalPilot

Я использую JQuery, чтобы настроить событие нажатия, которое проверяет допустимые значения, поскольку они в настоящее время entered.The проблемы с типом = числом заключается в том, что он позволяет вводить недопустимые значения, а затем проверять их достоверность позже.

 jQuery(this).bind (
      "keypress", 

      function (e) { 

       if(e.which!=8 && e.which!=0 && e.which!=46 && (e.which<48 || 
         e.which>57) && e.which != 45) { return false;} 
       if(e.which != 8 && e.which != 0) { 
        var r = /^-?(\d*)\.{0,1}(\d*)$/ ; 
        var curval ; 
        if(this.value) { 
         curval = this.value + String.fromCharCode(e.which); 
        } else { 
         curval = String.fromCharCode(e.which); 
        } 

        if(!r.test(curval)) { 
         return false; 
        } 
       } 
      } 
     );

источник

2014-12-09 22:20:50 Scott

Двунаправленная привязка AngularJS для ввода десятичного числа

ответ

Смежные вопросы