Angular.js:如何使用ng-bind显示concat.数组的元素作为字符串？

Question

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

期望的输出:我需要修改我的控制器功能,这样我就可以在'Grand Total'范围内显示更新的$ 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}
    ];

    };
} 

Answer 1

我会建议grandTotal你的功能$scope,然后绑定,如下所示:

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第一个范围中指示的插值(而不是).