如何让ui-mask将$ viewValue返回给模型,而不是$ modelValue?

时间:2013-06-13 17:44:49

标签: angularjs angular-ui

我在输入上使用ui-mask,因此用户可以输入日期:

 <input type="text" ui-mask="19/39/2999" ng-model="inicio">

(1,3和2是我放的一些额外的掩码所以它只允许0到1,0到3和2到3)

问题是,我使用控制器上的dateFilter初始化输入

 $scope.inicio = dateFilter((new Date), 'MM/dd/yyyy')

输入显示今天日期的正确值,例如06/13/2013。问题是当我将输入更改为05/13/2013时,$scope.inicio模型将包含05132013(根本没有格式化),我不知道如何使用{{1}而不是$viewValue,可以做到吗?

1 个答案:

答案 0 :(得分:1)

我所做的只是添加一个属性来控制你使用viewValue或Value。

更改脚本完全没有问题,需要 5 代码行。

以下是:

  • 我将尝试通过提供上面和下面代码的小视图来尽可能地显示代码添加的上下文。

首先将变量添加到

的顶部
return function uiMaskLinkingFunction(scope, iElement, iAttrs, controller){
    var maskProcessed = false, eventsBound = false,
    maskCaretMap, maskPatterns, maskPlaceholder, maskComponents,
    //... Ton of varaibles...

    var useViewValue; // <----- ADD THIS

稍后在代码中,您会找到Formatter和Parser函数:

      function formatter(fromModelValue){
        /*formatter code*/
      }

      function parser(fromViewValue){
        // parser code...
        if (value === '' && controller.$error.required !== undefined) {
          controller.$setValidity('required', false);
        }
        // ADD useViewValue code START
        if (useViewValue) 
            value = value.length ? maskValue(value) : '';
        // ADD useViewValue code END
        return isValid ? value : undefined;
      }

最后,您只需要在属性值中添加一个观察者:

      iAttrs.$observe('uiMask', initialize);

      // ADD useViewValue code START
      iAttrs.$observe('uiMaskUseViewvalue', function (useVVal) {
          useViewValue = useVVal == 'true';
      });
      // ADD useViewValue code END
      iAttrs.$observe('placeholder', initPlaceholder);

在HTML中实现

<input type="text" ui-mask="19/39/2999" ui-mask-use-viewvalue="true" ng-model="inicio">