我最近开始探索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不会改变。这实际上不是唯一的问题,我在将数组值绑定到输入框时遇到类似的问题。
任何帮助都将不胜感激。
答案 0 :(得分: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 />
答案 1 :(得分:0)
由于当您只更改某些模型时不会重新调用控制器功能,因此不会重新计算$scope.hc
的值。您需要手动更新它或在渲染之前以某种方式重新计算值。几种方法。
使用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" />
当defining hc
作为$ scope对象的属性时,您可以在此处使用旧的黄金ES5属性获取器:
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不会发生变化。