gpt4 book ai didi

单击按钮时的 Angularjs 操作

转载 作者:行者123 更新时间:2023-12-02 16:02:16 27 4
gpt4 key购买 nike

我正在尝试进行一些计算,但是一旦我输入金额,它就会完成。我只是希望通过单击按钮而不是自动发生这种情况。

到目前为止我做了什么:

<!DOCTYPE html>
<html ng-app="myAppModule">
<head>
<title>Angular JS - programming-free.com</title>
<link href="https://dl.dropbox.com/u/96099766/DetailModalExample/bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/angularjs.min.js"></script>
</head>
<body>
<div ng-controller="myAppController" style="text-align:center">
<p style="font-size:28px;">
Enter Quantity:
<input type="text" ng-model="quantity"/>
</p>
<h2>Total Cost: Rs.{{calculateval(quantity,10)}}</h2>
</div>
<script type="text/javascript">
var myAppModule = angular.module('myAppModule', []);
myAppModule.controller('myAppController', function($scope,calculateService) {
$scope.quantity=1;
$scope.calculateval = function(xval,yval) {
return calculateService.calculate(xval,yval);
}
});
// Service
myAppModule.factory('calculateService', function(){
return {
calculate: function(xval,yval){
return xval*yval;
}
}
});
</script>
</body>
</html>

最佳答案

由于计算调用绑定(bind)在模板中,因此计算会立即发生,当数量发生变化时,模板会显示其结果。

您可以尝试以下方法。将您的标记更改为以下内容:

<div ng-controller="myAppController" style="text-align:center">
<p style="font-size:28px;">Enter Quantity:
<input type="text" ng-model="quantity"/>
</p>
<button ng-click="calculateQuantity()">Calculate</button>
<h2>Total Cost: Rs.{{quantityResult}}</h2>
</div>

接下来,更新您的 Controller :

myAppModule.controller('myAppController', function($scope,calculateService) {
$scope.quantity=1;
$scope.quantityResult = 0;

$scope.calculateQuantity = function() {
$scope.quantityResult = calculateService.calculate($scope.quantity, 10);
};
});

这是一个JSBin example这演示了上述方法。

这种方法的问题是计算结果仍然以旧值显示,直到单击按钮为止。为了解决这个问题,您可以在数量发生变化时隐藏结果。

这将涉及更新模板以在输入上添加 ng-change 以及在结果上添加 ng-if:

<input type="text" ng-change="hideQuantityResult()" ng-model="quantity"/>

<h2 ng-if="showQuantityResult">Total Cost: Rs.{{quantityResult}}</h2>

在 Controller 中添加:

$scope.showQuantityResult = false;

$scope.calculateQuantity = function() {
$scope.quantityResult = calculateService.calculate($scope.quantity, 10);
$scope.showQuantityResult = true;
};

$scope.hideQuantityResult = function() {
$scope.showQuantityResult = false;
};

这些更新可以在 JSBin demo 中看到.

关于单击按钮时的 Angularjs 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21693403/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com