Question

我有一个简单的角度应用，其ng-model附加到一个宽度为

的输入

<input type="text" placeholder="1280" ng-model="containerWidth">

然后我在页面containerWidth下方的模板中显示{{containerWidth}}值{/ 1}}

我想对输入的值进行简单计算，例如只需在数字中加20即可。

我尝试添加{{containerWidth + 20}}，但它没有达到预期的效果，因为它只是连接数字串。

Answer 1

为了在输入字段值中添加int，您需要使用parseInt（）（本机js方法）将输入字段的字符串值转换为整数。这也是AngularJS how to add numbers inside the expression from a textbox?

的可能重复

这里，解决方案是将原生JS parseInt添加到要使用的范围中，如下所示：

内部控制器：

$scope.parseInt = parseInt;

在视图/ DOM中：

<input type="text" value="{{ parseInt(num1) + 1 }}" />

这是脚本：

"use strict";
var demo = angular.module('demo',[]);

demo.controller('demo-controller', function($scope){
  $scope.parseInt = function(s){
   return parseInt(s, 10);
  };
});

以下是支持此解决方案的交互式演示：

http://codepen.io/nicholasabrams/pen/zGPWQx

希望这有帮助！

Answer 2

只需将输入类型更改为数字：

var moduleA=angular.module("MyModuleA",[]);
  moduleA.controller("MyControllerA",function($scope){
    $scope.name = "Bob A";
 });
var moduleB=angular.module("MyModuleB",[]);
moduleB.controller("MyControllerB", function($scope) {
  $scope.name = "Steve B";
});
var main = angular.module("CombineModule", ["MyModuleA", "MyModuleB"]);
 main.controller("main",function($scope){
   $scope.loadModuleA = function(){
    console.log("Load module 'A' ")
  }; 
   $scope.loadModuleB = function(){
   console.log("Load module 'B' ")
  }; 
});

JSFiddle

Answer 3

您可以使用parseInt。虽然我支持只是将html更改为数字格式。以下是如何使用parse int：

首先在你的控制器中：

 $scope.parseInt = parseInt;

这会将parseInt函数放入作用域，以便您可以在表达式中使用它。

然后你可以像这样编写你的表达式：

{{parseInt(containerWidth) + 20}}

从输入执行ngModel值的计算，然后显示计算值

3 个答案: