货币格式的材料设计输入答案

【问题标题】：Material Design Input with currency format货币格式的材料设计输入
【发布时间】：2016-11-10 17:21:01
【问题描述】：

Material Design 中是否存在将格式作为参数的输入。我特别需要货币格式。

如果这不可用，您建议采用什么方法来实现此功能。

谢谢。

【问题讨论】：

也许你可以使用一些十进制格式，然后将货币符号的字符放在数字之前。
我尝试了类似的方法，但是我必须将输入的类型设置为文本，这样就失去了向上和向下按钮以及仅限数字的限制。
我希望有一些像 Kendo 的数字文本框这样更封装的东西。
您可以从 jquery 掩码插件创建自己的指令

标签： angularjs material-design

【解决方案1】：

您可以这样做，将图标添加为货币并使用以下指令进行屏蔽，

<body ng-controller="MainCtrl" layout="column">
    <md-content  >
      <md-input-container class="md-icon-float">
        <label>Price</label>
        <md-icon md-font-icon="fa fa-money"></md-icon>
        <input  currency-mask ng-model="amount" id="sInput" />
      </md-input-container>
     </md-content>
  </body>

指令

app.directive('currencyMask', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {

      var formatNumber = function(value) {

        value = value.toString();
        value = value.replace(/[^0-9\.]/g, "");
        var parts = value.split('.');
        parts[0] = parts[0].replace(/\d{1,3}(?=(\d{3})+(?!\d))/g, "$&,");
        if (parts[1] && parts[1].length > 2) {
          parts[1] = parts[1].substring(0, 2);
        }

        return parts.join(".");
      };
      var applyFormatting = function() {
        var value = element.val();
        var original = value;
        if (!value || value.length == 0) {
          return
        }
        value = formatNumber(value);
        if (value != original) {
          element.val(value);
          element.triggerHandler('input')
        }
      };
      element.bind('keyup', function(e) {
        var keycode = e.keyCode;
        var isTextInputKey =
          (keycode > 47 && keycode < 58) || // number keys
          keycode == 32 || keycode == 8 || // spacebar or backspace
          (keycode > 64 && keycode < 91) || // letter keys
          (keycode > 95 && keycode < 112) || // numpad keys
          (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
          (keycode > 218 && keycode < 223); // [\]' (in order)
        if (isTextInputKey) {
          applyFormatting();
        }
      });
      element.bind('blur', function(evt) {
        if (angular.isDefined(ngModelController.$modelValue)) {
          var val = ngModelController.$modelValue.split('.');
          if (val && val.length == 1) {
            if (val != "") {
              ngModelController.$setViewValue(val + '.00');
              ngModelController.$render();
            }
          } else if (val && val.length == 2) {
            if (val[1] && val[1].length == 1) {
              ngModelController.$setViewValue(val[0] + '.' + val[1] + '0');
              ngModelController.$render();
            } else if (val[1].length == 0) {
              ngModelController.$setViewValue(val[0] + '.00');
              ngModelController.$render();
            }
            applyFormatting();
          }
        }
      })
      ngModelController.$parsers.push(function(value) {
        if (!value || value.length == 0) {
          return value;
        }
        value = value.toString();
        value = value.replace(/[^0-9\.]/g, "");
        return value;
      });
      ngModelController.$formatters.push(function(value) {
        if (!value || value.length == 0) {
          return value;
        }
        value = formatNumber(value);
        return value;
      });
    }
  };
});

DEMO

【讨论】：

非常好。谢谢你。 :)
非常感谢兄弟！

【解决方案2】：

我认为最好的选择是使用：ng2-currency-mask 指令进行干净编码。

<input currencyMask [(ngModel)]="value" [options]="{ prefix: 'R$ ', thousands: '.', decimal: ',', precision: 2 }"/>

【讨论】：

【解决方案3】：

React 货币格式化程序包具有 Material-Ui TextField 的外观和感觉。它还接受 Material Ui TextField API 的所有道具和类。它易于使用且有据可查。请看一看。 GitHub：https://github.com/unicef/material-ui-currency-textfield npm 包：https://www.npmjs.com/package/@unicef/material-ui-currency-textfield

【讨论】：