Angularjs vs Jquery input mask

Asked

Viewed 5,147 times

1

I have a ng-repeat and I need the input field to have the following format:

9.999.99

Code:

<tr ng-repeat="item in estado.tabela | orderBy:'ano'">
    <td>{{item.ano}}
    </td>
    <td>

       <input type="number"  step="any" ng-model="item.valor" class="form-control" ng-disabled="{{item.ano < @Model.Confo.ano}}">

    </td>
    <td>{{item.somatorio | number:2}}
    </td>

What better way to solve this?

jquery angularjs jquery-ui

3 answers

1


I recommend using the Angular UI

Ex:

<input type="number"  step="any" ng-model="item.valor" class="form-control" ng-disabled="{{item.ano < @Model.Confo.ano}}" ui-mask="9.999,99">

http://angular-ui.github.io/ui-utils/#/Mask

1

I advise doing something "manually", javascript:

<html>
<head>
<script type="text/javascript">
  function mask(inputName, mask, evt) {
    try {
      var text = document.getElementById(inputName);
      var value = text.value;

      // If user pressed DEL or BACK SPACE, clean the value
      try {
        var e = (evt.which) ? evt.which : event.keyCode;
        if ( e == 46 || e == 8 ) {
          text.value = "";
          return;
        }
      } catch (e1) {}

      var literalPattern=/[0\*]/;
      var numberPattern=/[0-9]/;
      var newValue = "";

      for (var vId = 0, mId = 0 ; mId < mask.length ; ) {
        if (mId >= value.length)
          break;

        // Number expected but got a different value, store only the valid portion
        if (mask[mId] == '0' && value[vId].match(numberPattern) == null) {
          break;
        }

        // Found a literal
        while (mask[mId].match(literalPattern) == null) {
          if (value[vId] == mask[mId])
            break;

        newValue += mask[mId++];
      }

      newValue += value[vId++];
      mId++;
    }

    text.value = newValue;
  } catch(e) {}
}
</script>
</head>
<body>
<form id="form1">
<input type="text" id="zipCode" onkeyup="javascript:mask('zipCode', '0.000,00', event);" value= 9.999,99 >
</form>
</html>

1

Browser other questions tagged jquery angularjs jquery-ui

You are not signed in. Login or sign up in order to post.