Angularjs沒有更新變量

Question

我想直接顯示/更新計算答案，而不需要附加按鈕。 或者我需要一個功能和按鈕來應用更改？

<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> 

Answer 1

讓square作爲一種方法&使用插補指令，方法，這樣將在每個消化評價。

標記

square: {{square()}} 

代碼

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

Answer 2

添加上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; 
     } 
    } 
    }); 
});