绑定输入和非输入数字内容以计算一系列值答案

【问题标题】：binding input and non-input numeric contents for calculation of a series of values绑定输入和非输入数字内容以计算一系列值
【发布时间】：2015-04-27 17:51:03
【问题描述】：

我正在寻求帮助。我对 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}} 那样简单）

【问题讨论】：

在前两个输入上使用 ng-change 计算 value3。
嗨@JimCote，所以在这种情况下，假设还有10 个<p>s，下一个取决于先前的值。 ng-change 是否允许我说 value4 = value3 + value（高度简化）、value5 = value4 + value1 等？
使用数组value[] 代替value1、value2 等，以及ng-repeat 和ng-change="func($index)" 之类的东西。
@JimCote 如果这些值对命名没有任何特殊意义，建议很好：类似的东西：stackoverflow.com/a/19432646/986160
太棒了！ ng-change 会在输入上，ng-repeat 在 html 元素上吗？

标签： javascript html angularjs data-binding

【解决方案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/>'s。这是一个示例，仅用于说明目的:)

<!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>

【讨论】：

我实际上对第一个 p 的更改并没有太大的困难，因为它是根据 2 个（在此示例中）输入计算的。但是，取决于第一个结果的第二个p 是我需要担心的。您是否建议将 ng-change 添加到输入中，以创建值 3，然后我可以将其用于计算第二个 p？
是的，您的函数将在 ng-model 指定的范围内操作 value3，并且包含 value3 的任何内容都将相应更新。请注意，对于大型应用程序而言，将所有内容都放在范围变量中通常是一种不好的做法
再说一次，我是 Angular 的超级新手，所以你会推荐什么来代替使用范围变量？
p 没有 ng-model ！！您需要将其设为只读输入 docs.angularjs.org/api/ng/directive/ngModel
将来你将使用具有独立作用域和服务的指令来传递东西，但现在这些对你来说太复杂了:) 一步一步