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

Question

我正在寻求帮助。我是 Angular 的新手，但我已经搜索过但未能找到答案。基本情况是我有5个输入框。随着这些更改，table 中的数据也会更改。但是，我有一行数据依赖于先前的单元格，所以如果 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 时调用该函数。你应该避免在视图中有 logic/arithmetic..

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

那样调用它

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

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

binding input and non-input numeric contents for calculation of a series of values

html

javascript

data-binding

angularjs