AngularJS：自动更新总价

Question

html代码：

<input placeholder='Total price' type="text" value="{{ totalPrice || '' }}" </input>

角度代码：

$scope.totalPrice = function() {
        var total = 0;
            if (itemsToBuy.length > 0) {
                for (var i = 0; i < $scope.itemsToBuy.length; i++) {
                    total += $scope.itemsToBuy[i].price;
                }
            }
        return total;
    };

这种递归给出了正确的值，但是我在显示它时遇到了问题。

我想在屏幕上显示totalPrice值，在输入中自动更新它的值，当itemsToBuy数组更改它时长度。

所以再一次，total变量保存一个正确的值，但它不会显示在输入中。

感谢您提供任何进一步的答案。

编辑：对于幸福感：

  

当我使用您的解决方案时，请使用   $watch方法最终导致错误：totalPrice is not a function。   https://jsfiddle.net/scgsc7or/15/

     

当我使用您的第一个解决方案时，使用：

<button ng-change="updateTotalPrice">ButonText</button>

  

它也不起作用，错误显示为：[$compile:ctreq]。 https://jsfiddle.net/scgsc7or/16/

Answer 1

TotalPrice是一个函数，因此您不能像{{totalPrice}}那样使用它。只有当totalPrice是一个变量时才会这样。

您需要的是

$scope.totalPrice = 0;

if (itemsToBuy.length > 0) {
   for (var i = 0; i < $scope.itemsToBuy.length; i++) {
      $scope.totalPrice += $scope.itemsToBuy[i].price;
   }
}

每当itemsToBuy更改时，您都会调用

Answer 2

正如K Scandrett所指出的，totalPrice是一个函数，所以你需要执行它来显示它的返回值。因此{{totalPrice || ''}}应为{{totalPrice()}}。

Answer 3

好的K Scandrett处理你的初始问题，$ scope.totalPrice不能成为一个函数。

对于评论中的第二个问题，您需要做的是将ng-change添加到您按下以更改itemsToBuy的控件。

所以你可以定义一个函数来更新totalPrice，如下所示：

$scope.updateTotalPrice = function(){
    $scope.totalPrice = 0;

if (itemsToBuy.length > 0) {
    for (var i = 0; i < $scope.itemsToBuy.length; i++) {
        $scope.totalPrice += $scope.itemsToBuy[i].price;
    }
  }
}

然后您有两个选项来执行该功能按需

1. 如果您要更新itemsToBuy即。当您单击按钮时，长度会发生变化，然后您可以使用此按钮上的ng-change来执行您的功能。

<button ng-change="updateTotalPrice">ButonText</button>

或

1. 对itemsToBuy变量的长度使用$ scopes watch 。

   $scope.$watch(**'itemsToBuy.length'**, function() {
       $scope.updateTotalPrice();
   });
   

<强>小提琴

https://jsfiddle.net/scgsc7or/18/