我正在寻求一些帮助。我对 Angular 很陌生,但我已经搜索过但未能找到答案。基本情况是我有5个输入框。当这些发生变化时,表中的数据也会发生变化。但是,我有一行数据取决于前一个单元格,因此如果 A = 1、B = A + 2、C = B +1 等。我不想重复我必须得到的所有疯狂数学单元格 A 的号码。我尝试添加 ng-model
到 html 单元格(当然,一旦页面首次初始化,这不会产生任何影响。有没有办法将单元格的内容绑定(bind)到前一个单元格的内容,而无需某种输入?谢谢!
以下是我尝试以代码形式执行的示例:
<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>
这是一个非常简化的版本,但要点就在那里。 (所以不,这并不像第二个 <p>
是 {{value3 + 2 * value1 + value2}}
那么简单)
最佳答案
您可以拥有一个在每个输入发生 ng-change 时调用的函数。您应该避免在 View 中包含逻辑/算术..
然后你可以在页面或元素的 Controller 中拥有这个函数并像这样调用它
<input type="text" ng-change="ctrl.myFunc(value1,value2)"/>
对于两个输入。
编辑:顺便说一下,p 标签没有 ng-model!如果您想将其用于其他后续值计算,则需要将其设为只读输入。 http://docs.angularjs.org/api/ng/directive/ngModel
编辑 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}}"/>
编辑3:
这是完整的解决方案:(也在 plunkr 中查看它的实际情况: http://plnkr.co/edit/FXAae6mjOGOfw2Xczlb1 )
请记住,对于更大的应用程序来说,将所有内容都放在 $scope 中是一种不好的做法,而且 <br/>
不应该被使用。这是一个仅用于说明目的的示例:)
<!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>
关于javascript - 绑定(bind)输入和非输入数字内容,用于计算一系列值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28724050/