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。使用 getter

当 defining hc 作为 $scope 对象的属性时，你可以在这里使用旧的 gold 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 在这种情况下不会改变。

AngularJS 绑定不更新模型

AngularJS binding not updating model

javascript

angularjs

angularjs-ng-model

1。 ngChange 指令

2。使用 getter