$ wathのない合計とを計算する "/>

Question

私は私の計算プログラムの作業プロトタイプを持っています。 http://plnkr.co/edit/u2uwwkvm6s62bfo0rbew

$watchなしで合計を計算できるようにしたいと思います。燃料量を変更し、他の人がそれに応じて変わるのを見ることができます。

また、max=""の場合は "null"を許可するように<input>タグのMaximum == 0をバインドする方法を見つけようとしています。

Answer 1

トータルフィールド（Totalweight、TotalMoment、CG）をスコープ関数にバインドしてみてください。

index.html

<table class="table table-striped">

    ..........

    <tr>
      <td colspan=4 class="text-right" style="font-weight: bold;">Totals:</td>
      <td class="text-right">{{calculator.getTotalWeight() | number:0}}</td>
      <td></td>
      <td class="text-right">{{calculator.getTotalMoment() | number:0}}</td>
    </tr>
    <tr>
      <td colspan=5 class="text-right" style="font-weight: bold;">CG:</td>
      <td class="text-right">{{calculator.getTotalMoment()/calculator.getTotalWeight() | number:2}}</td>
      <td></td>
    </tr>
  </table>

.

app.js

var WtBalApp = angular.module('wtBalApp', []);

WtBalApp.controller('WtBalController', function($scope, $log) {
  $scope.positions = [{
    Station: 'Empty Weight',
    Quantity: 1345,
    Max: 2300,
    Arm: 35.6,
    Mult: 1,
    ReadOnly: true,
    Consumable: false
  }, {
    Station: 'Pilot',
    Quantity: 0,
    Max: 0,
    Arm: 34,
    Mult: 1,
    ReadOnly: false,
    Consumable: false
  }, {
    Station: 'Front Passenger',
    Quantity: 0,
    Max: 0,
    Arm: 34,
    Mult: 1,
    ReadOnly: false,
    Consumable: false
  }, {
    Station: 'Fuel',
    Quantity: 50,
    Max: 50,
    Arm: 36,
    Mult: 6,
    ReadOnly: false,
    Consumable: true
  }, {
    Station: 'Rear Passenger #1',
    Quantity: 0,
    Max: 0,
    Arm: 34,
    Mult: 1,
    ReadOnly: false,
    Consumable: false
  }, {
    Station: 'Rear Passenger #2',
    Quantity: 0,
    Max: 0,
    Arm: 34,
    Mult: 1,
    ReadOnly: false,
    Consumable: false
  }];
$scope.calculator = {
    getTotalWeight: function(){
      var totalWeight=0;
      $scope.positions.forEach(function(position) {
        totalWeight += position.Quantity * position.Mult;
      });
      return totalWeight;
    },
    getTotalMoment: function(){
      var totalMoment=0;
      $scope.positions.forEach(function(position) {
        totalMoment += position.Quantity * position.Mult * position.Arm;
      });
      return totalMoment;
    } 
}
});

.

とこの条件文を使用して、最大値== 0

の場合、max属性をnullにバインドします。

max="{{position.Max===0?'':position.Max}}"

.

これは plnkr demo

です。

Answer 2

照会

の関数に$ watchを変更する

$scope.calculateTotal = function() {
...

. 入力値が入力ボックスに追加されるたびにこの機能を呼び出します。

ページがロードされたときに値を表示するには、コントローラの下部にあるng-change="calculateTotal()"を呼び出します。

これは更新されたplnkr