我最近开始探索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不变。实际上这并不是唯一的问题,将数组值绑定到输入框时遇到了类似的麻烦。

任何帮助,将不胜感激。

最佳答案

由于仅更改某些模型时将不会重新调用控制器功能,因此不会重新计算$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.使用吸气剂

defining 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不会更改。

10-05 20:51
查看更多