Question

我对angularJs很新。我的问题是：

我的模型数据保存在数据库中，如果重新打开项目，则会显示数据。通过保存，数据将再次存储在数据库中。我在显示号码时遇到问题因为该值存储为字符串，必须解析为整数。

这是html：

 <numeric-input numericbinding="item.showInt" ng-model="item.operandvalue" ></numeric-input>

根据项值（bool，int，string）的格式，操作数值以不同方式显示。这与numericbinding的值有关。

我尝试使用以下指令将字符串解析为int：

.directive('numericInput', function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: {
            model: '=ngModel',
            numericbinding: '='
        },
        template: '<input id="integerType" type="number" ng-model="intValue" ng-hide="!numericbinding" >',
        link: function (scope) {
            //avoid that string and bool is parsed,  showInt is false
            if (scope.numericbinding === false || scope.numericbinding === undefined) {
                return;
            }

           scope.intValue = parseInt(scope.model, 10);

        }
    };
})

这样可以正确显示数字。但是如果我想再次为绑定的item.operandvalue存储我的数据，我会在后端得到一个Nullpointer。我知道我需要将数字转换回字符串。我试过多种方法，例如

ng-change：但它从未进入给定的功能。

然后我想使用带有格式化程序和解析器的ngModelController，如AngularJS - Formatting ng-model before template is rendered in custom directive

中所述

.directive('numericInput', function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: {
            model: '=ngModel',
            numericbinding: '='
        },
        template: '<input id="integerType" type="number" ng-model="item.operandvalue" ng-hide="!numericbinding" >',
        link: function (scope, ngModelController) {
            //avoid that string and bool is parsed,  showInt is false
            if (scope.numericbinding === false || scope.numericbinding === undefined) {
                //console.log('not a number - return');
                return;
            }

            ngModelController.$formatters.unshift(function(valueFromModel) {
                return parseInt(valueFromModel, 10);
           });

            ngModelController.$parsers.push(function(valueFromInput) {
                return valueFromInput.toString();
            });

        }
    };
})

但是，valueFromModel未定义。根本不显示该号码。 scope.item.operandvalue也是未定义的。在Chrome中，错误是：TypeError：无法读取未定义的属性'operandvalue'。

我认为我应该将item.operandvalue（数据绑定）保存为字符串，并使用不同的名称显示int值。在我的第一种方式中，似乎item.operandvalue得到一个数字，数据绑定不再起作用。

如何解决问题？非常感谢您的帮助！

Answer 1

您可以使用两个字段：backing_field和binding_field。读取db时，您将写入backing_field。然后，这可以用于更新binding_field，例如，通过$ watch。您可以使用两个手表使它们保持同步。如果一个更改，您转换其值并将其写入另一个。您现在可能会争辩说他会创建一个循环，但AngularJS会检测到没有任何变化，也不会再次触发。使用此方法，您可以在binding_field因用户交互而更改时更新backing_field，并在从数据库获取新数据时通过backing_field更新binding_field。

AngularJS：输入类型=数字＆＃34;将ngModel字符串值解析为数字并返回

1 个答案: