angular + currencyInput

angular + currencyInput 小控件

Posted by Rina on 2016-07-07

打赏支持

angularjs 实现 input 数据自动格式化功能

介绍

在一些项目经常需要对用户输入的数字进行千分制格式化. 比如: 输入: 11111111111111 时, 显示为: 111,111,111,111,11

对于form表单, 目前已经有个不错的 gem 实现了数据自动格式化功能, 使用非常简单, 方便. 可点击 autonumeric-rails 查看详情.

angular 绑定 ng-model input 数据自动格式化的工具在网上还没看到非常好用的, 于是实现了个简单的 currency-input 标签. 功能效果与上图类似.

代码:

angular.directive 'currencyInput', ->
  restrict: 'E'
  scope: field: '='
  replace: true
  template: '<input type="text"></input>'
  link: (scope, element, attrs) ->
    doWithDecimal = (inputVal)->
      return '0' if ! inputVal
      if typeof inputVal == 'string'
        inputVal = inputVal.replace(/[^\d.\',']/g, '')
        inputVal = inputVal.replace(/,/g, '')
        inputVal = inputVal.substring(0, 15)
      return new BigNumber(inputVal).toFormat()

    input = element

    updateInputValue = (inputVal)->
      res = doWithDecimal(inputVal)
      console.log('xxxx:' + res )
      input.val(res)
      input.data('origin-val', res.replace(/,/g, ''))

    scope.$watch 'field', ()->
      inputVal = scope.field
      updateInputValue(inputVal)
      return

    $(element).bind 'keyup', (e) =>
      inputVal = input.val()
      updateInputValue(inputVal)
      scope.$apply ->
        scope.field = Number(input.data('origin-val'))
        return
      return
    return

使用:

currency-input field='money'

这里的 field 代替了 ng-model. 如需添加其他属性与 input 用法标签一致.