[英]binding input and non-input numeric contents for calculation of a series of values
I was looking for some assistance. 我正在寻找帮助。 I am very new to Angular, but I have searched and haven't been able to find an answer.
我是Angular的新手,但是我已经搜索过,但是找不到答案。 The basic situation is that I have 5 input boxes.
基本情况是我有5个输入框。 As these are changed the data in a table changes.
随着这些更改,表中的数据也会更改。 However, I have a row of data that is dependent on the prior cell, so if A = 1, B = A + 2, C = B +1, etc. I would prefer not to repeat all the crazy math I have to get the number for cell A. I have tried adding
ng-model
to the html cells (which of course has no affect once the page is first initialized. Is there a way to bind a cell's contents to the prior cell's contents without having an input of some kind? Thanks! 但是,我有一行数据取决于前一个单元格,因此,如果A = 1,B = A + 2,C = B +1,依此类推。我宁愿不重复我必须得到的所有疯狂数学我已经尝试将
ng-model
添加到html单元格中(当然,在首次初始化页面后,这当然没有任何影响。是否可以将单元格的内容绑定到先前单元格的内容,而无需输入有点吗?
Here is a sample of what I'm trying to do in code form: 这是我尝试以代码形式进行操作的示例:
<input type="text" ng-model="value1"><br>
<input type="text" ng-model="value2"><br>
<p ng-model="value3">{{value1 + value2}}</p>
<p>{{value 3 + value1}}</p>
This is a very simplified version, but the gist is there. 这是一个非常简化的版本,但要旨在那里。 (so no it isn't as simple as having the 2nd
<p>
be {{value3 + 2 * value1 + value2}}
) (所以不像第2个
<p>
是{{value3 + 2 * value1 + value2}}
)
You could have a function that is called when ng-change on each of the inputs happens. 您可能有一个在每个输入上发生ng-change时调用的函数。 You should avoid having logic/arithmetic in the view..
您应该避免在视图中使用逻辑/算术。
Then you can have this function in the controller of the page or element and call it like 然后,您可以在页面或元素的控制器中使用此函数,然后像调用它一样
<input type="text" ng-change="ctrl.myFunc(value1,value2)"/>
for both inputs. 对于两个输入。
Edit: By the way there is no ng-model for p tag!! 编辑:顺便说一句,没有p标签的ng模型! you need to make that a readonly input instead if you want to use it for other subsequent value caluclation.
如果要将其用于其他后续值计算,则需要将其设置为只读输入。 http://docs.angularjs.org/api/ng/directive/ngModel
http://docs.angularjs.org/api/ng/directive/ngModel
Edit 2: Alternatively you can use value="{{value1 + ... }}"
in your inputs like (given your example): 编辑2:或者,您也可以在输入中使用
value="{{value1 + ... }}"
,例如(根据您的示例):
<input type="text" ng-model="A" value="0"/>
<input type="text" ng-model="B" value="{{A + 2}}"/>
<input type="text" ng-model="C" value="{{B + 1}}"/>
Edit 3: 编辑3:
Here is the full solution: (also in plunkr to see it in action: http://plnkr.co/edit/FXAae6mjOGOfw2Xczlb1 ) Keep in mind that having everything in $scope is a bad practice for bigger applications and also <br/>
's shouldn't be used. 这里是完整的解决方案:(也可以在plunkr中查看它的运行方式: http ://plnkr.co/edit/FXAae6mjOGOfw2Xczlb1)请记住,将$ scope中的所有内容用于大型应用程序都是不好的做法,而且
<br/>
不应使用。 This is an example just for illustration purposes :) 这是一个仅用于说明目的的示例:)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
</head>
<body ng-app="bindExample">
<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.calculate = function() {
if (!$scope.noninput) $scope.noninput = [];
if (!$scope.value) $scope.value = [];
$scope.noninput[0] = parseInt($scope.value[0]) + parseInt($scope.value[1]) || 0;
$scope.value[2] = $scope.noninput[0]+100;
};
}]);
</script>
<div ng-controller="ExampleController">
1st Value plus: <input type="text" ng-model="value[0]" value="{{value[0]}}" ng-change="calculate()"/><br/>
2nd Value: <input type="text" ng-model="value[1]" value="{{value[1]}}" ng-change="calculate()"/><br/>
Non input result: <span ng-bind="noninput[0]">{{noninput[0]}}</span><br/>
Value 3nd (non-input result plus 100): <input type="text" ng-model="value[2]" value="{{value[2]}}"/><br/>
<br/>
Model:<br/>
(Input Values): {{value}}<br/>
(Non Input Values): {{noninput}}<br/>
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.