Angularjs不更新变量

时间:2016-01-30 14:13:05

标签: angularjs data-binding angularjs-scope angularjs-bindings

我希望直接显示/更新计算答案,而无需使用附加按钮。 或者我需要一个功能和按钮来应用更改吗?

<div ng-app="myApp" ng-controller="myCtrl">

A_Number: <input type="number" step="1" ng-model="A_Number"><br> 

Display (A_Number): {{A_Number}}
<br>
square: {{square}} 
</div>

控制器:

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) {

$scope.square = $scope.A_Number * $scope.A_Number; 
}); 
</script>

2 个答案:

答案 0 :(得分:4)

square作为一种方法&amp;在插值指令中使用该方法,以便在每个摘要上进行评估。

<强>标记

square: {{square()}} 

<强>代码

$scope.square = function(){
    //made error free
    if(!isNaN($scope.A_Number))
      return $scope.A_Number * $scope.A_Number;
    return 0;
};

答案 1 :(得分:0)

在A_Number上添加监视以实现相同的目标。 JSFiddle供参考 - https://jsfiddle.net/9a2xz61y/3/

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.square = 0;
  $scope.$watch('A_Number', function(newValue, oldValue) {
    {
      if (!isNaN(newValue)) {
        $scope.square = $scope.A_Number * $scope.A_Number;
      }
    }
  });
});