AngularJS綁定未更新模型

Question

我最近開始探索AngularJS。 我看到了一些類似的問題，但是我很確定這里沒有任何示波器問題。 （或者我對范圍的理解不清楚。）

JS代碼：

var app = angular.module("myApp", []);
app.controller("myController", function($scope){
$scope.b=50000
$scope.apr=10
$scope.hc=$scope.b/$scope.apr
...
})

HTML：

<div ng-app="myApp" ng-controller="myController">
<span class="inp-heading">b:</span>
<input ng-model="b" type="number" step="1000" min="0" />
<input ng-model="apr" type="number" step="1" min="0" />
{{b}} <br /> <!-- this updates on input value change -->
{{hc}} <br /> <!-- this does NOT update on input value change -->
{{b/apr}} <br /> <!-- this updates on input value change -->

如注釋中所述（在上面的HTML代碼中），$ scope.hc不變。 這實際上並不是唯一的問題，在將數組值綁定到輸入框時遇到了類似的麻煩。

任何幫助，將不勝感激。

Answer 1

您的hc不會自動更新，如果需要的話，它應該是一個類似

var app = angular.module("myApp", []);
app.controller("myController", function($scope){
  $scope.b=50000
  $scope.apr=10
  $scope.hc= function() { return $scope.b/$scope.apr; };
  ...
})

然后在你的局部應該是（而不是hc ，它將是hc() ）

<div ng-app="myApp" ng-controller="myController">
<span class="inp-heading">b:</span>
<input ng-model="b" type="number" step="1000" min="0" />
<input ng-model="apr" type="number" step="1" min="0" />
{{b}} <br /> 
{{hc()}} <br /> 
{{b/apr}} <br /> 

Answer 2

由於僅更改某些模型時就不會重新調用控制器功能，因此不會重新計算$scope.hc的值。 在渲染之前，您需要手動更新它或以某種方式獲取重新計算的值。 幾種方法。

1. ngChange指令

使用ngChange指令（onchange事件類型）更新$scope.hc值：

var app = angular.module("myApp", []);
app.controller("myController", function($scope){
  $scope.b = 50000
  $scope.apr = 10
  $scope.hc = $scope.b/$scope.apr

  $scope.onChange = function () {
    $scope.hc = $scope.b/$scope.apr
  }
})

HTML

<input ng-model="b" ng-change="onChange()" type="number" step="1000" min="0" />
<input ng-model="apr" ng-change="onChange()" type="number" step="1" min="0" />

2.使用吸氣劑

在將 hc 定義為$ scope對象的屬性時，可以在這里使用舊的ES5屬性getter：

var app = angular.module("myApp", []);
app.controller("myController", function($scope){
  $scope.b = 50000
  $scope.apr = 10

  Object.defineProperty($scope, 'hc', {
    get: function () {
      return $scope.b/$scope.apr
    }
  })
})

在這種情況下，HTML不會更改。