Fatal编程技术网
  • javascript/
  • Javascript 用于计算一系列值的绑定输入和非输入数字内容

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

javascript html angularjs data-binding

Javascript 用于计算一系列值的绑定输入和非输入数字内容,javascript,html,angularjs,data-binding,Javascript,Html,Angularjs,Data Binding,我在寻求帮助。我对Angular很陌生，但我已经搜索过了，还没有找到答案。基本情况是我有5个输入框。随着这些更改，表中的数据也会更改。但是，我有一行数据依赖于前一个单元格，因此如果a=1、B=a+2、C=B+1等，我不想重复所有疯狂的数学运算，我必须得到单元格a的数字。我已经尝试将ng model添加到html单元格中（这当然不会影响页面的初始化。有没有一种方法可以将单元格的内容绑定到前一个单元格的内容，而无需任何输入？谢谢 以下是我试图以代码形式完成的一个示例： <input type=

我在寻求帮助。我对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>






{{value1+value2}

{{value 3+value 1}}
这是一个非常简化的版本，但要点就在这里。（因此，它没有第二个
be
{{value3+2*value1+value2}}
）

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

然后，您可以在页面或元素的控制器中使用此函数，并像这样调用它

<input type="text" ng-change="ctrl.myFunc(value1,value2)"/>
编辑3:

以下是完整的解决方案：（也可以在plunkr中看到它的作用：） 请记住，对于更大的应用程序，将所有内容都放在$scope中是一种不好的做法，而且不应使用

。这是一个示例，仅用于说明：）


例子
angular.module（'bindExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.calculate=函数（）{
如果（！$scope.noninput）$scope.noninput=[]；
如果（！$scope.value）$scope.value=[]；
$scope.noninput[0]=parseInt（$scope.value[0]）+parseInt（$scope.value[1]）|0；
$scope.value[2]=$scope.noninput[0]+100；
};
}]);
第一个值加：

第二个值：

非输入结果：{{noninput[0]}}

值3nd（非输入结果加100）：



型号：

（输入值）：{{value}}

（非输入值）：{{noninput}}
在前两个输入上使用
ng change
计算
value3
。您好@JimCote，因此在这种情况下，假设还有10个
，下一个取决于先前的值。
ng change
是否允许我说一个值4=value3+值（高度简化），value5=value4+value1等？使用数组
value[]
代替
value1
，
value2
等，并使用类似
ng change=“func（$index）”的字符串
ng repeat
@JimCote如果值对命名没有任何特殊意义，这是一个很好的建议：类似这样：太棒了！输入上是否会出现
ng更改
，html元素上是否会出现
ng重复
？实际上，我对第一个
p
的更改没有太大困难，因为它是基于关闭2（在本例中）输入。但是，第二个
p
，这取决于第一个的结果，是我需要担心的问题。您是否建议在输入中添加
ng change
，以创建值3，然后我可以在第二个
p
的计算中使用该值？是的，您的函数将在ng模型规范的范围内操作值3IFE和任何包含value3的内容都将相应更新。请注意，对于更大的应用程序，将所有内容都包含在范围变量中通常是一种不好的做法。再次，我是Angular的新手，因此您建议使用什么来代替范围变量？p没有ng模型！！您需要在将来将其作为只读输入您将使用带有独立作用域和服务的指令来传递信息，但现在这些对您来说太复杂了：）一步一个脚印 
<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}}"/>

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