Question

我的文本框很少，并希望实现简单的计算，如：

（TextBox1 + TextBox2 + textBox3）的值= TextBox4的值。
（TextBox4 + TextBox5）= TextBox6的值

如何在AngularJS中实现这一目标？

见下面的例子：

<table ng-app="" ng-controller="acadController">
<tr ng-repeat="x in semone">
            <td>{{ x.SubjectName }}</td>
            <td>{{ x.Credit }}</td>
            <td><input type="number" ng-model="pt1" /></td>
            <td><input type="number" ng-model="pt2"/></td>
            <td><input type="number" ng-model="ia"/></td>
            <td><input type="number" value="{{pt1+pt2+ia}}" ng-model="semMarks" class="marks_catotal" /></td>
            <td><input type="number" ng-model="endSemMarks" class="marks_endsem" /></td>
            <td><input type="text" class="marks_total" value="{{ semMarks + endSemMarks }}"/></td>
        </tr>
<table>

Answer 1

您可以使用$watch功能对用户更改做出反应：

在控制器内部，可以在修改值时触发函数。

function calculateResult(){
    $scope.semMarks = $scope.pt1 + $scope.pt2 + $scope.ia;
}

$scope.$watch('pt1', calculateResult);
$scope.$watch('pt2', calculateResult);

您还可以注册一个在修改值时直接触发的函数，而不是您的手表：

$scope.calculateResult = calculateResult;

然后，在您的视图中，您只需在修改输入时调用此函数。

<td><input type="number" ng-model="pt2" ng-change="calculateResult()"/></td>

大多数情况下，使用事件比使用$ watch消耗更少的处理器。 Angular评估每个$watch并检查每个$digest周期内是否有任何更改。 Angulars本身也使用了很多美元手表，因此增加太多的手表会显着降低性能。

Answer 2

您可以使用$ scope.watch来查看这些变量及其总和，如果更改，请将其添加到$ scope.marks

$scope.$watch('pt1 + pt2', function(v) {$scope.marks = v;});

请参阅此plnkr：http://embed.plnkr.co/p0rQkUBMfEmYZkKh4Nrt/

Answer 3

考虑endSemMarks和marks_total的{{3}}。

Answer 4

您应该只是绑定到一个评估值总和的函数。如上所述，$ watch更贵，更难理解。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.tb1 = 0;
  $scope.tb2 = 0;
  $scope.tb3 = 0;
  $scope.tb5 = 0;

  $scope.sum123 = function() {
    return $scope.tb1 + $scope.tb2 + $scope.tb3;
  }

  $scope.sum45 = function() {
    return $scope.tb1 + $scope.tb2 + $scope.tb3 + $scope.tb5;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="plunker" ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div>1 :
    <input type="number" ng-model="tb1">
  </div>
  <div>2 :
    <input type="number" ng-model="tb2">
  </div>
  <div>3 :
    <input type="number" ng-model="tb3">
  </div>
  <div>4 :
    <input type="number" ng-value="sum123()">
  </div>
  <div>5 :
    <input type="number" ng-model="tb5">
  </div>
  <div>6 :
    <input type="number" ng-value="sum45()">
  </div>
</body>

Angular Js双向绑定

4 个答案: