AngularJS-多绑定-计算输入值
AngularJS - Multiple binding - calculating input values
我正在用AngularJS构建一个大型表单,它将用大量公式和函数取代巨大的excel电子表格。简言之,这种形式是一个计算器,其中许多值取决于以前的值。我目前的方法是在所有影响下一个输入的输入上添加ng更改,同时在那些以编程方式更改的字段中添加观察者。我发现这种做法很令人困惑,很难维持。做那种工作有什么更好的模式吗?
我正在构建的完整表单由60多个相互作用的字段组成。所有计算值,如示例中的"价格",都可以手动更改或覆盖。因此,无论价格是通过以前的值计算还是手动更改,以下示例中的"总价"计算都应该是自动的。
小示例:
<div ng-app>
<h2>Calculator</h2>
<div ng-controller="TestCtrl">
<form>
<li>Width (cm): <input type="text" ng-change="changePrice()" ng-model="width"/> </li>
<li>Height (cm): <input type="text" ng-change="changePrice()" ng-model="height"/> </li>
<li>Depth (cm)<input type="text" ng-change="changePrice()" ng-model="depth"/> </li>
<li>Price per cm3<input type="text" ng-change="changePrice()" ng-model="priceCm"/> </li>
<li><b>Price</b><input type="text" ng-model="price"/> <br/><br/></li>
<li>Packaging price<input type="text" ng-change="changeTotalPrice()" ng-model="packagePrice"/> </li>
<li><b>Total price</b><input type="text" ng-model="total"/> </li>
</form>
</div>
</div>
JS:
function TestCtrl($scope) {
$scope.$watch('price', function(newValue,oldValue){
if(newValue != oldValue)
{
$scope.changeTotalPrice();
}
});
$scope.changePrice = function(){
var width = 0;
var height = 0;
var depth = 0;
var priceCm = 0;
width = $scope.width;
height = $scope.height;
depth = $scope.depth;
priceCm = $scope.priceCm;
if(width > 0 && height > 0 && depth > 0 && priceCm > 0)
{
$scope.price = width * height * depth * priceCm;
}
}
$scope.changeTotalPrice = function(){
var price = 0;
var packaging = 0;
price = $scope.price;
packaging = $scope.packagePrice;
if(price > 0 && packaging > 0)
{
$scope.total = price*1 + packaging*1;
}
}
}
样品:http://jsfiddle.net/rewnao6p/3/
是的,这是一种更好的方法:由于您的总数取决于值的其余部分,因此动态计算总数
function TestCtrl($scope) {
$scope.price = function(){
var width = $scope.width;
var height = $scope.height;
var depth = $scope.depth;
var priceCm = $scope.priceCm;
if(width > 0 && height > 0 && depth > 0 && priceCm > 0)
{
return width * height * depth * priceCm;
}
}
$scope.totalPrice = function(){
var price = $scope.price();
var packaging = $scope.packagePrice;
if(price > 0 && packaging > 0)
{
return price*1 + packaging*1;
}
}
}
看小提琴:http://jsfiddle.net/g7p7ho6z/
相关文章:
- 计算输入中有多少逗号分隔的字符串
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- Javascript-如何使用bootstrap日期时间选择器自动计算两个时间输入之间的差异
- 计算输入值
- 如何从范围滑块动态值计算输入值
- 使用reactjs setState回调获取上一个输入值的计算值
- 在添加的输入字段中计算TOTAL
- 基于输入框的角度JS计算
- 计算输入的每个单词组合的百分比
- 对表单输入执行计算
- 当用户在文本框中输入日期时,如何计算一年的持续时间
- 使用 JavaScript 计算并添加表单输入的值
- 使用单选按钮的输入计算分数
- Javascript - 根据用户的表单输入计算用户的年龄
- 从用户输入计算日期
- 不使用eval()从表单输入计算数据
- 如何根据 3 个下拉列表中的输入计算值
- 通过文本字段输入计算余额和预付款
- JavaScript中的动态输入计算
- Javascript动态输入计算