javascript—如何在自定义属性指令中获取具有数字类型的输入值

k4ymrczo  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(298)

这就是我目前在ie11中实现和工作的内容。现在我们正试图摆脱ie11,解决一些突然出现的问题。

<input type="number" evaluate-input="model.personalNumber" ng-model="model.personalNumber" maxlength="50" ng-change="..." ng-blur="..." />
angular.module("myApp")
    .directive("evaluateInput", [
        function () {
            return {
                restrict: "A",
                replace: true,
                scope: {
                    evaluateInput: "="
                },
                link: function ($scope, elem, attrs, ctrl) {

                    /* Need to grab the input from the element because if the input is a number type and it has non-numeric values then the model will be empty. */
                    var inputValue;

                    elem.bind("keyup", function (e) {

                        inputValue = elem[0].value;

                        if (e.keyCode === 13) {
                            $scope.$apply(function () {
                                calculateFormula();
                            });
                        }
                    })

                    elem.bind("blur change", function (e) {

                        inputValue = elem[0].value;

                        $scope.$apply(function () {
                            calculateFormula();
                        });

                    })

                    /* Uses the javascript eval function but catches and swallows any errors and returns null */
                    function calculateFormula() {

                        var result = null;

                        try {
                            result = eval(inputValue);

                            result = Number(result.toFixed(2));
                        }
                        catch (e) {
                            // No need to generate an error on invalid input.
                            // Just leave the result as null
                        }

                        $scope.ngModel = result;
                    }

                }
            };

        }]);

其工作方式是,您可以在输入中键入类似100*2的表达式,它将计算表达式并返回结果。在edge或chrome中运行此操作时,元素[0]。值未设置值。
我曾尝试使用其他方法(如elem.val()和attr.evaluateinput)获取该值,但这些方法要么返回null,要么返回模型的名称。当这个指令被执行时,似乎还没有设置ng模型。
如能提供正确方向的任何帮助或信息,将不胜感激。

bsxbgnwa

bsxbgnwa1#

您的主要问题在于html5约束验证。
正如angularjs文档中提到的:
如果在输入中输入非数字,浏览器将以空字符串形式报告该值,这意味着ngmodel中的视图/模型值以及随后的范围值也将是空字符串。
要解决这个问题,您必须设置 input 作为一个 text 输入。
在下面的示例中,我修复了这个问题和其他一些小错误

const app = angular.module("myApp", []);

app.controller('TestCtrl', function() {

  const ctrl = this;

  ctrl.personalNumber = 2;
})

app.directive("evaluateInput", [
  function() {
    return {
      restrict: "A",
      scope: {
        ngModel: '='
      },
      link: function($scope, elem, attrs, ctrl) {

        /* Need to grab the input from the element because if the input is a number type and it has non-numeric values then the model will be empty. */
        var inputValue;

        elem.bind("keyup", function(e) {
          inputValue = elem[0].value;

          if (e.keyCode === 13) {
            calculateFormula();
          }
        })

        elem.bind("blur change", function(e) {

          inputValue = elem[0].value;

          calculateFormula();

        })

        /* Uses the javascript eval function but catches and swallows any errors and returns null */
        function calculateFormula() {

          var result = null;

          try {
            result = eval(inputValue);

            result = Number(result.toFixed(2));
          } catch (e) {
            // No need to generate an error on invalid input.
            // Just leave the result as null
          }

          $scope.ngModel = result;
        }

      }
    };

  }
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="TestCtrl as model">

    <input type="text" evaluate-input ng-model="model.personalNumber" maxlength="50" />

    <div>
      {{model.personalNumber}}
    </div>

  </div>
</div>

相关问题