Angular 为什么看不到工作，我什至应该使用它吗？答案

【问题标题】：Angular Why doesn't watch work and should I even be using it?Angular 为什么看不到工作，我什至应该使用它吗？
【发布时间】：2017-03-02 06:04:17
【问题描述】：

我正在尝试获取一些依赖于其他输入数据的输入的值。我相信我需要一块手表来实现这一点，但我不确定，因为我尝试过的一切都失败了，出现了我不知道如何处理的错误。

我有一个在多行中有五个字段的批发订单，例如

code | quantity | price | discount % | total 1 |
code | quantity | price | discount % | total 2 |
code | quantity | price | discount % | total 3 |
code | quantity | price | discount % | total 4 |

代码列是产品代码的自动完成列表，点击后会填充价格列。然后在调整数量和折扣时更新总计列。

Total 纯粹是为用户显示的，但会在之前的 3 个输入中的任何一个发生更改时立即更新。我正在尝试获取为用户显示的所有总计的运行总计。以下是我尝试查看总数的一些尝试。

这里是一个笨蛋http://embed.plnkr.co/XdGjHy

这是我的输入。这是从打印出 100 行的 php for 循环中获取的。

<tr>
    <td class="td-code"><input id="code'.$i.'" name="code'.$i.'" type="text" class="code'.$i.' order-code" value="'.@$orderItem->{'code'.$i}.'" /></td>
    <td class="td-price"><input ng-model="price'.$i.'" class="order-price" id="price'.$i.'" name="price'.$i.'" type="number" value="'.@$orderItem->{'price'.$i}.'" step="0.50"/></td>
    <td class="td-quantity"><input ng-model="quantity'.$i.'" class="order-price" id="quantity'.$i.'" name="quantity'.$i.'" type="number" value="'.@$orderItem->{'quantity'.$i}.'" /></td>
    <td class="td-discount"><input ng-model="discount'.$i.'" class="order-price" id="discount'.$i.'" name="discount'.$i.'" type="number" value="'.@$orderItem->{'discount'.$i}.'" /></td>
    <td class="td-total"><span class="row-total" ng-model="total'.$i.'" id="total'.$i.'" class="order-price" id="total'.$i.'" valid-number/>{{(price'.$i.' * quantity'.$i.') / 100 * (100 - discount'.$i.') | number:2}}</span></td>
</tr>

例如一只对我没有任何回报的手表。我只是想至少将前两个总数加在一起并显示它们

$scope.$watch("total1", function (newValue, oldValue) {

    $scope.updated_info = $scope.total1 + $scope.total2;            

});

然后当我输入 {{updated_info}} 或 {{scope.updated_info}} 时，我什么也看不到。

我在控制器应用程序中放置的两个代码示例。

$scope.total = function() {
    var total = parseFloat($scope.total1 || 0) + parseFloat($scope.total2 || 0) +
                parseFloat($scope.total3 || 0) + parseFloat($scope.total4 || 0) + 
                parseFloat($scope.total5 || 0);
    return total || 0;
};

然后当我再次输入 {{total}} 或 {{scope.total}} 时，我什么也看不到。

【问题讨论】：

$scope.total 是函数，所以写成 {{total()}}。
它只是给了我一个零。
您的函数返回零，因此请调试并检查您的计算值。
不幸的是，这就是我从昨天以来一直在做的事情。
你能添加 plunker 吗？每个人都可以轻松回答。

标签： angularjs watch

【解决方案1】：

您的代码有很多错误，并且 {{total()}} 在 ng-controller div 之外。请参阅下面的简单答案。

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <style>
    td {
      width: 100px;
    }
    input {
      width: 100px;
    }
  </style>
</head>

<body>
  
  <style type="text/css">
    /* style the auto-complete response */
    
    li.ui-menu-item {
      font-size: 12px !important;
    }
  </style>
  <div ng-app="myApp" ng-controller="OrderController" class="row">
    <div class="page-header">
      <h1>Order Form</h1>
      <form onsubmit="return false;">
        <table>
          <thead>
            <tr>
              <th>Image</th>
              <th>Code</th>
              <th>Desc</th>
              <th>Price</th>
              <th>Qty</th>
              <th>Total</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="order-image">
                  <span id="image1"></span>
                </div>
              </td>
              <td>
                <input id="code1" type="text" class="code1 order-code" />
              </td>
              <td>
                <input class="order-prod_desc" id="prod_desc1" type="text" />
              </td>
              <td>
                <input ng-model="price1" placeholder="price" ng-change="change();" class="order-price" id="price1" name="price1" type="number" />
              </td>
              <td>
                <input ng-model="quantity1" placeholder="quantity" ng-change="change();" class="order-price" id="quantity1" type="number" value="" />
              </td>
              <td>
                <input class="order-price" placeholder="total" ng-model="total1" ng-disabled="true" id="total1" type="number" step="0.01" />
              </td>
            </tr>
            <tr>
              <td>
                <div class="order-image">
                  <span id="image2"></span>
                </div>
              </td>
              <td>
                <input id="code2" type="text" class="code2 order-code" />
              </td>
              <td>
                <input class="order-prod_desc" id="prod_desc2" type="text" />
              </td>
              <td>
                <input ng-model="price2" placeholder="price" ng-change="change();" class="order-price" id="price2" name="price2" type="number" />
              </td>
              <td>
                <input ng-model="quantity2" placeholder="quantity" ng-change="change();" class="order-price" id="quantity2" type="number" value="" />
              </td>
              <td>
                <input class="order-price" placeholder="total" ng-model="total2" ng-disabled="true" id="total2" type="number" value="" step="0.01" />
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
      <h2>Total: {{total()}}</h2>
  </div>

  <script>
    var myApp = angular.module('myApp', []);



    myApp.controller('OrderController', function($scope) {

$scope.change = function(){
  $scope.total1 = ($scope.price1 || 0)  * ($scope.quantity1 || 0);
$scope.total2 = ($scope.price2 || 0 ) * ($scope.quantity2 || 0);
}

      $scope.total = function() {
        var total = parseFloat($scope.total1 || 0) + parseFloat($scope.total2 || 0);
        return total || 0;
        
      };
    });
  </script>
  </body>

</html>

【讨论】：

嘿曼尼坎丹。效果很好，我的 Angular 知识非常低，而且 JS 也很差。非常感谢您的帮助
欢迎朋友。