Angular.js：如何使用ng-bind将数组的连接元素显示为字符串？

Question

我是Angular的新手，并且有一个关于ng-bind的基本问题，但在文档中找不到答案。我的场景基于O'Reily Angular.js书中的购物车应用程序，但似乎无法使ng-bind工作。

期望的输出：我需要修改我的控制器函数，以便可以在“Grand Total” span中显示更新后的$scope.items数组元素。

以下是该函数：

 function CartController($scope) {
    $scope.items = [
      {title: 'Software', quantity: 1, price: 1399.95},
      {title: 'Data Package (1TB)', quantity: 1, price: 719.95},
      {title: 'Consulting (per hr.)', quantity: 1, price: 75.00}
    ];

    $scope.remove = function(index) {
      $scope.items.splice(index, 1);
    },

    $scope.reset = function(index) {
      $scope.items = [
      {title: 'Software', quantity: 0, price: 1399.95},
      {title: 'Data Package (1TB)', quantity: 0, price: 719.95},
      {title: 'Consulting (per hr.)', quantity: 0, price: 75.00}
    ];

    };
} 

- damienstanton

Answer 1

我建议在你的$scope上创建一个grandTotal函数，然后将其绑定，像这样：

http://jsfiddle.net/XMTQC/

HTML

<div ng-app ng-controller="CartController">
    Grand Total: <span>{{grandTotal()}}</span>
    <br/>
    Grand Total: <span ng-bind="grandTotal()"></span>
    <br/>
</div>

JavaScript

$scope.grandTotal = function () {
    return $scope.items.reduce(function (p, c) {
        return p.price || p + c.price;
    });
};

您也可以使用插值表达式（而不是ngBind）, 如第一个所示。

- Langdon

---

我处于类似的情况，但我需要总计返回一个对象，如：{ baseTotal: 200.00, vat22: 44.00, total: 244.00 } 然后像这样打印出来：Base: {{grandTotal().baseTotal}}<br /> VAT 22%: {{grandTotal().vat22}}<br /> Total: {{grandTotal().total}}<br />但是，这样做似乎会调用函数至少3次！难道没有一种方法可以将grandTotal()结果提取到中间值中吗？谢谢。 - TesX

不用担心这三个调用...它们应该很便宜，你不应该注意到任何减速。或者，您可以将 grandTotal() 更改为将三个值写入作用域 ($scope.baseTotal=X; $scope.vat22=Y; $scope.total=Z;)，然后使用 $watch 或 $watchCollection 监视项目数组中的更改并在集合更改时调用 grandTotal()。 - Langdon