您可以使用Angular.js的双向数据绑定功能来实现此目的。下面是一个示例代码:
HTML模板:
小计: {{subtotal}}
JavaScript控制器:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.quantity = 0;
$scope.price = 0;
$scope.subtotal = 0;
$scope.updateSubtotal = function() {
$scope.subtotal = $scope.quantity * $scope.price;
};
});
在这个示例中,我们使用了ng-model
指令来绑定输入框的值到$scope
对象的属性上。ng-change
指令用于在输入框的值发生变化时调用updateSubtotal()
函数。在updateSubtotal()
函数中,我们将quantity
和price
相乘,并将结果赋值给subtotal
,这样就实现了小计的计算。小计的变化会自动反映在页面上,这是因为我们使用了Angular.js的双向数据绑定功能。
您可以将上述代码复制到一个HTML文件中并打开该文件,然后尝试更改输入框中的数量和价格,您将看到小计会自动更新。