前导零号码输入缺少内 [英] leading zeros missing within number input

查看：206
本文介绍了前导零号码输入缺少内的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要显示时，输入的号码字段中，前导零的整数00-09之间。我使用angularJS。

输入域视图/模板（用于在HTML中的样式不好意思）：

 ＆LT;脚本类型=文/ NG-模板ID =form_field_time＆GT;
  ＆LT; H3风格=COLOR：珊瑚;＆GT; {{field.displayName}}＆LT; / H3 GT＆;
  ＆LT; D​​IV NG控制器=timeAdjustCtrl＆GT;
      ＆LT;输入风格=浮动：左;宽度：自动;保证金右：为5px;类型=数字分='0'最大= '23'占位=HHNG-模式=timeHHNG变化=adjustTimeHhMm（timeHH，timeMM，场）NG-的init =initTimeValues​​（场） /＆GT;
      ＆LT; p =风格浮动：左;线高度：50像素; FONT-SIZE：1EM;＆GT;：＆LT; / P＆GT;
      ＆LT;输入风格=浮动：左;宽度：自动;保证金左：为5px;类型=数字分='0'最大= '59'步=1占位符=MMNG-模式=timeMM​​NG变化=adjustTimeHhMm（timeHH，timeMM，场）NG-的init = initTimeValues​​（场）/＆GT;
      ＆LT; p =风格浮动：左;线高度：50像素; FONT-SIZE：1EM;＆GT; {{field.theValues​​ [0]}}＆下; / P＆GT;
  ＆LT; BR风格=明确：既; /＆GT;
  ＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;

我的控制器：

  app.controller（'timeAdjustCtrl'，['$范围'，
  功能（$范围）{    $ scope.adjustTimeHhMm =功能（小时，分，场）{
      的console.log（$ scope.timeHH）;
      VAR strHH =字符串（小时）;
      VAR strMM =字符串（分钟）;      变种路径=00;
      变种newHH = path.substring（0，path.length  -  strHH.length）+ strHH;
      变种newMM = path.substring（0，path.length  -  strMM.length）+ strMM;
      VAR newHhMm =字符串（newHH +：+ newMM）;
      的console.log（newHH +：+ newMM）;
      field.theValues​​ [0] = newHhMm;
      的console.log（$ scope.timeHH）;
    }    $ scope.initTimeValues​​ =功能（场）{
      如果（field.theValues​​ [0]！='不确定'）{
        $ scope.timeHH = parseInt函数（field.theValues​​ [0] .substring（0,2））;
        $ scope.timeMM = parseInt函数（field.theValues​​ [0] .substring（3,5））;
      }
    }
  }
]）;

此输入字段或设置两个输入字段设置被存储为单个值（其保持在所需的格式（HH：MM =恩=> 1时07））的时间值（小时和分钟）。在NG-模型值（$ scope.timeHH＆放大器; $ scope.timeMM）不输入字段内举行前导零

。

我发现了一个解决这个问题的，但我无法得到它的工作。这是在（<一href=\"http://stackoverflow.com/questions/27916185/angularjs-trims-leading-zeros-in-model-while-view-input-value-still-remains-unc\">Answer).

下面是该指令的颂歌。它不触发模糊，也没有给错误。任何人都可以看到结构或语法方面的问题？

查看：

 ＆LT;脚本类型=文/ NG-模板ID =form_field_time＆GT;
  ＆LT; H3风格=COLOR：珊瑚;＆GT; {{field.displayName}}＆LT; / H3 GT＆;
  ＆LT; D​​IV NG控制器=timeAdjustCtrl＆GT;
      ＆LT;输入我的十进制风格=浮动：左;宽度：自动;保证金右：为5px;类型=数字分='0'最大= '23'占位=HHNG-模式=timeHHNG变化=adjustTimeHhMm（timeHH，timeMM，场）NG-的init =initTimeValues​​（场） /＆GT;
      ＆LT; p =风格浮动：左;线高度：50像素; FONT-SIZE：1EM;＆GT;：＆LT; / P＆GT;
      ＆LT;输入我的十进制风格=浮动：左;宽度：自动;保证金左：为5px;类型=数字分='0'最大= '59'步=1占位符=MMNG-模式=timeMM​​NG变化=adjustTimeHhMm（timeHH，timeMM，场）NG-的init = initTimeValues​​（场）/＆GT;
      ＆LT; p =风格浮动：左;线高度：50像素; FONT-SIZE：1EM;＆GT; {{field.theValues​​ [0]}}＆下; / P＆GT;
  ＆LT; BR风格=明确：既; /＆GT;
  ＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;

指令（关于输入字段模糊事件捕获并避免导致零点微调）（我的控制下放置输入字段（而不是内部））：

  app.directive（'myDecimals'，函数（）{    返回{
      要求：'ngModel'，
      链接：功能（范围，榆树，ATTRS，CTRL）{        elm.blur（函数（）{
            VAR VAL = $ CTRL viewValue。
            。CTRL $ setViewValue（VAL * 1）;
            。CTRL $渲染（）;
        }）;
      }
    };
  }）;


解决方案

我遇到类似的问题，其中前导零的正在从我的文字输入修整。当我打电话 ngModel。$ setViewValue（123.8900）输入显示的文字是123.89（模型的设置是否正确零）。

为了解决这个问题，同时还设置正确的模式，我称之为既：

  VAR值=123.8900
ngModel $ setViewValue（值）。 //更新模型，但修剪零视图
inputEl [0] .value的=价值; // prevents修剪尾随零，但就凭这不会更新模型

I need to have displayed, within the number input field, the leading zeros on integers between 00-09. I am using angularJS.

View/template for the input field(sorry for the style within the html):

<script type="text/ng-template" id="form_field_time">
  <h3 style="color:coral ;">{{field.displayName}}</h3>
  <div ng-controller="timeAdjustCtrl">
      <input style="float:left; width:auto; margin-right:5px;" type="number" min='0' max='23' placeholder="HH" ng-model="timeHH" ng-change="adjustTimeHhMm(timeHH, timeMM, field)" ng-init="initTimeValues(field)"  />
      <p style="float:left; line-height:50px;font-size:1em;">:</p>
      <input style="float:left;width:auto; margin-left:5px;" type="number" min='0' max='59' step="1" placeholder="MM" ng-model="timeMM" ng-change="adjustTimeHhMm(timeHH, timeMM, field)" ng-init="initTimeValues(field)" />
      <p style="float:left; line-height:50px;font-size:1em;"> {{field.theValues[0]}}</p>
  <br style="clear:both;" />
  </div>  
</script>

My controller:

  app.controller('timeAdjustCtrl', ['$scope', 
  function ($scope) {

    $scope.adjustTimeHhMm = function(hours, minutes, field) {
      console.log($scope.timeHH);
      var strHH = String(hours);
      var strMM = String(minutes);

      var path = "00";
      var newHH = path.substring(0, path.length - strHH.length) + strHH;
      var newMM = path.substring(0, path.length - strMM.length) + strMM;
      var newHhMm = String(newHH+':'+newMM);
      console.log(newHH + ':' + newMM);
      field.theValues[0] = newHhMm; 
      console.log($scope.timeHH);
    }

    $scope.initTimeValues = function(field){
      if (field.theValues[0] != 'undefined'){
        $scope.timeHH = parseInt(field.theValues[0].substring(0,2));
        $scope.timeMM = parseInt(field.theValues[0].substring(3,5));
      }
    }
  }
]);

This input field or set of two input fields set a time value(hours and minutes) which is stored as a single value(which remains in the desired format(HH:MM = ex=> 01:07)). The ng-model values($scope.timeHH & $scope.timeMM) dont hold the leading zeros within the input field.

I found an answer to this issue but I am not able to get it to work. This is the (Answer).

Here is the ode for the directive. It is not triggering on blur nor giving errors. Can anyone see structure or syntax issues?

View:

<script type="text/ng-template" id="form_field_time">
  <h3 style="color:coral ;">{{field.displayName}}</h3>
  <div ng-controller="timeAdjustCtrl">
      <input my-decimal style="float:left; width:auto; margin-right:5px;" type="number" min='0' max='23' placeholder="HH" ng-model="timeHH" ng-change="adjustTimeHhMm(timeHH, timeMM, field)" ng-init="initTimeValues(field)"  />
      <p style="float:left; line-height:50px;font-size:1em;">:</p>
      <input my-decimal style="float:left;width:auto; margin-left:5px;" type="number" min='0' max='59' step="1" placeholder="MM" ng-model="timeMM" ng-change="adjustTimeHhMm(timeHH, timeMM, field)" ng-init="initTimeValues(field)" />
      <p style="float:left; line-height:50px;font-size:1em;"> {{field.theValues[0]}}</p>
  <br style="clear:both;" />
  </div>  
</script>

Directive(catches on blur event on the input field and avoids leading zero trim)(placed under my controller for the input fields(not inside)):

 app.directive('myDecimals', function() {

    return {
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {

        elm.blur(function() {
            var val = ctrl.$viewValue;
            ctrl.$setViewValue(val * 1);
            ctrl.$render();
        });
      }
    };
  });

解决方案

I'm encountering a similar issue, where leading zero's are being trimmed from my "text" input. When I call ngModel.$setViewValue("123.8900") the text displayed in the input is "123.89" (the model is correctly set with zeros).

To solve this issue while still correctly setting the model, I call both:

var value = "123.8900";
ngModel.$setViewValue(value); //updates model but trims zeros in the view
inputEl[0].value = value; //prevents trimming of trailing zero but this alone wont update the model

这篇关于前导零号码输入缺少内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆