Question

我创建了一个文本字段，我想在div中显示数字的计算值（在textfiled中输入）。我的HTML：

<input ng-model="inp" type="text"/><br/>
<div>{{equateInp}}</div>

angularjs：

$scope.inp = "";
    $scope.equateInp = parseInt($scope.inp);

但它不起作用。请帮忙

Answer 1

请尝试这个

<input ng-model="inp" type="number"/><br/>
{{inp}}

Answer 2

试试这个

<input type = "number" ng-model = "inpNumber">
 <div>{{inpNumber}}</div>

Answer 3

以下是示例

<input ng-model="inp" type="text"/><br/>
<div>{{calculate(inp)}}</div>

$scope.equateInp = function(inp) {
    // do your calculation here 
    //eg:
    c = parseInt(inp) + 10
    return c
}

这是jsfiddle Demo，

Answer 4

整数是原始javascript类型，双向绑定不适用于基本类型。因此，您需要使用对象属性分配双向绑定模型或使用ng-change。在您的案例中，您需要对模型执行一些操作（parseInt），您可以使用第二个选项来使用ng-change，如下所示：

<强> JS：

$scope.user = {
  inp: 0
};

$scope.onChange = function () {
  $scope.equateInp = parseInt($scope.user.inp);    
};

<强> HTML：

<input ng-model="user.inp" 
       ng-change='onChange()'
       type="text"/>
<br/>
<div>{{equateInp}}</div>

这里有一个可用的JSBin：https://jsbin.com/nuxaqak/edit?html,js,console,output

编辑：更新了JSBin以处理表达式的评估 https://jsbin.com/nuxaqak/edit?html,js,output

Answer 5

在我看来，您正在尝试观察inp var的变化，计算该值并输出结果。有多种方法可以实现这一目标。

使用$ watch：

<强> HTML：

<input ng-model="inp" type="text"/><br/>
<div>{{ equateInp }}</div>

<强> angularjs：

$scope.inp = "";

$scope.$watch('inc', function() {
    $scope.equateInp = parseInt($scope.inp);
})

这基本上会在更改inc变量时监视。

使用计算方法：

<强> HTML：

<input ng-model="inp" type="text"/><br/>
<div>{{ calculate(inp) }}</div>

<强> angularjs：

$scope.inp = "";

$scope.calculate = function(value) {
    return ($scope.inp * 5);
}

每次更改变量时都会运行计算方法

以角度js计算范围变量的输入值

5 个答案: