如何在 Angular.js 中解析 Int
Posted
技术标签:
【中文标题】如何在 Angular.js 中解析 Int【英文标题】：How to parseInt in Angular.js 【发布时间】：2014-12-05 06:57:10 【问题描述】：可能，这是最简单的事情，但我无法以角度将字符串解析为 Int..
我想做什么：
<input type="text" ng-model="num1">
<input type="text" ng-model="num2">
Total: num1 + num2
如何对这些 num1 和 num2 值求和？
谢谢！
【问题讨论】：
(num1-0) + (num2-0)，不是吗？但我宁愿在这里使用辅助函数。
确实有效！谢谢！
对于任何来这里想知道如何做这个 JS 方面的人来说，$window.parseInt() 是最好的
【参考方案1】：
在作用域内执行操作。
<script>
angular.controller('MyCtrl', function($scope, $window)
$scope.num1= 0;
$scope.num2= 1;
$scope.total = $scope.num1 + $scope.num2;
);
</script>
<input type="text" ng-model="num1">
<input type="text" ng-model="num2">
Total: total
【讨论】：
【参考方案2】：你不能（至少目前）在角度表达式中使用parseInt，因为它们不是直接计算的。引用the doc:
Angular 不使用 javascript 的
eval()来评估表达式。 相反，Angular 的$parse服务会处理这些表达式。Angular 表达式无法访问全局变量，例如
window、document或location。这种限制是故意的。它 防止意外访问全局状态——一个常见的来源 细微的错误。
所以你可以在你的控制器中定义一个total() 方法，然后在表达式中使用它：
// ... somewhere in controller
$scope.total = function()
return parseInt($scope.num1) + parseInt($scope.num2)
// ... in html
Total: total()
不过，对于添加数字这样简单的操作来说，这似乎相当庞大。另一种方法是使用-0 op 转换结果：
Total: num1-0 + (num2-0)|number
...但这显然不会 parseInt 值，只会将它们 cast 到数字（|number 过滤器阻止显示 null 如果此转换结果在NaN)。因此，请选择适合您特定情况的方法。
【讨论】：
【参考方案3】：选项 1（通过控制器）：
angular.controller('numCtrl', function($scope, $window)
$scope.num = parseInt(num , 10);
选项 2（通过自定义过滤器）：
app.filter('num', function()
return function(input)
return parseInt(input, 10);
);
(num1 | num) + (num2 | num)
选项 3（通过表达式）：
首先在你的控制器中声明：
$scope.parseInt = parseInt;
然后：
parseInt(num1)+parseInt(num2)
选项4（来自raina77ow）
(num1-0) + (num2-0)
【讨论】：
不知何故我不小心对此投了反对票，现在除非更新答案，否则它已被锁定...我将在答案末尾添加空格，以便我可以添加赞成票它 选项 4 很不错【参考方案4】：var app = angular.module('myApp', [])
app.controller('MainCtrl', ['$scope', function($scope)
$scope.num1 = 1;
$scope.num2 = 1;
$scope.total = parseInt($scope.num1 + $scope.num2);
]);
演示：parseInt with AngularJS
【讨论】：
【参考方案5】：<input type="number" string-to-number ng-model="num1">
<input type="number" string-to-number ng-model="num2">
Total: num1 + num2
在 js 中：
parseInt($scope.num1) + parseInt($scope.num2)
【讨论】：
这可能有效，但需要明确的是，字符串到数字是建议的指令，而不是 Angular 的一部分。请参阅：docs.angularjs.org/error/ngModel/numfmt。它允许您将字符串值分配给数字输入字段。它不会改变实际类型【参考方案6】：这是绑定加号的方法
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope)
$scope.total = function()
return parseInt($scope.num1) + parseInt($scope.num2)
)
</script>
<body ng-app='myApp' ng-controller='myCtrl'>
<input type="number" ng-model="num1">
<input type="number" ng-model="num2">
Total:num1+num2
Total: total()
</body>
</html>【讨论】：
【参考方案7】：在模板内部工作正常。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<input ng-model="name" value="0">
<p>My first expression: (name-0) + 5 </p>
</div>
</body>
</html>
【讨论】：
以上是关于如何在 Angular.js 中解析 Int的主要内容，如果未能解决你的问题，请参考以下文章