AngularJS-输入数字微调器，手动输入数字时工作不正常

在stackoverflow上，我发现了一个用户为angularJS，输入数字微调器所做的指令，我只是在寻找它

一切正常，但有一点不正常，当你在输入框中手动输入一个数字，然后按减号，它会从这个数字中减去1，这里一切正常

但是当你输入一个数字时，首先按加号，而不是加1，它会在你写的数字旁边加一个

“1”

！ 只有在修复了它之后才能“减”

有人能帮我修复代码以避免这种情况吗？我希望当我手动输入号码时，您可以按“加号”并在该号码上获得

+1

这是因为将返回一个字符串作为模型值，正如@AlekseySolovey所提到的，您必须将其转换为a（因为

“10”+1

将给您“101”）。由于您也在使用

numericOnly

指令，因此它似乎是执行转换的正确位置，因为您将仅在一个位置进行转换。以下是一个例子：

（函数（）{
“严格使用”；
var app=角度
.模块（“应用程序”，[]）；
app.controller（'AppController'，['$scope'，函数（$scope）{
var vm=这个；
vm.testNumber=10；
}]);
app.directive（'numerionly'，function（）{
返回{
要求：'ngModel'，
链接：函数（范围、元素、属性、模型控制）{
modelCtrl.$parsers.push（函数（inputValue）{
if（角度isNumber（输入值））{
返回输入值；
}
var transformedInput=inputValue？编号（inputValue.replace（/[^\d.-]/g'，）：空；
if（transformedInput！=输入值）{
modelCtrl.$setViewValue（transformedInput）；
modelCtrl.$render（）；
}
返回转换输入；
});
}
};
});
应用指令（'numberSpin'，[函数（）{
返回{
限制：'E'，
范围：{
“ngModel”：“=”
},
模板：“”+
'' +
'+' +
'- ',
链接：功能（范围、要素、属性）{
scope.onlyNumbers=/^\d+$/；
scope.plus=函数（）{
scope.ngModel=scope.ngModel+1；
};
scope.减号=函数（）{
scope.ngModel=scope.ngModel-1；
};
}
}
}])
}());
数字旋转div{
位置：相对位置；
宽度：126px；
}
数字自旋输入{
高度：32px；
宽度：100%；
文本对齐：右对齐；
右边填充：20px；
框大小：边框框；
字体大小：16px；
}
数字旋转{
位置：绝对位置；
文本对齐：居中；
线高：16px；
排名：0；
右：0；
高度：16px；
显示：块；
左边框：1px实心#ccc；
边框底部：1px实心#ccc；
宽度：16px；
}
数字旋转。ns减{
位置：绝对位置；
文本对齐：居中；
显示：块；
线高：16px；
高度：16px；
左边框：1px实心#ccc；
底部：0；
右：0；
宽度：16px；
}

不是完全添加
1
，而是将其连接起来。例如
1+1
给出
2
，而
“1”+1
给出
“11”
。减号没有该属性，因此
“11”-1
给出
10
。它的一个破解/快速修复方法是抛出一个数字：
scope.ngModel=Number（scope.ngModel）+1你总是在点上@AlekseySolovey！那很有魅力！非常感谢你，把它写下来作为答案，我会把它记下来的！我可以再问你一件事吗，我试图编辑代码以只接受正数，我尝试使用这个正则表达式：“/^\d*[1-9]\d*$/”，但是如果在显示0时按减号，它将返回一个空的输入字段，在手动插入新的正数之前，我不能再使用“加号”或“减号”了，你能帮我一下吗？老实说，代码很乱，
ng模式
会删除不符合正则表达式的值，将其保留为
未定义
。铸造
Number（）
只能部分解决问题。您可以键入诸如
1.2.3
之类的值，这将绕过模式作为有效数字，但在对其进行数字转换或执行
+1
或
-1
操作后，结果显然是
NaN
我可以再问您一件事吗，我试图编辑代码以仅接受正数，我尝试使用此正则表达式：'/^\d*[1-9]\d*$/”但是如果在显示0时按减号，它将返回一个空的输入字段，在手动插入新的正数之前，我不能再使用“加号”或“减号”，您能帮我吗？