Question

我正在寻求一些帮助。我是Angular的新手，但我已经搜索过，但未能找到答案。基本情况是我有5个输入框。随着这些更改，表中的数据会发生变化。但是，我有一行依赖于先前单元格的数据，所以如果A = 1，B = A + 2，C = B + 1等，我宁愿不重复我必须得到的所有疯狂数学单元格A的编号。我已经尝试将ng-model添加到html单元格中（一旦页面首次初始化，这当然没有任何影响。有没有办法将单元格的内容绑定到先前单元格的内容而没有某种输入？谢谢！

以下是我在代码表单中尝试做的示例：

<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}}）

这么简单

Answer 1

当每个输入发生ng-change时，你可以调用一个函数。你应该避免在视图中使用逻辑/算术。

然后你可以在页面或元素的控制器中使用这个函数，并像

一样调用它

<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>。这只是一个例子，仅用于说明目的：）

{{1}}

绑定输入和非输入数字内容，用于计算一系列值

1 个答案: