5

私は Angular を初めて使用し、ドキュメントに記載されていない ng-bind に関する基本的な質問があります。私のシナリオは、O'Reily Angular.js ブックのショッピング カート アプリに基づいており、ng-bind を動作させることができないようです。

望ましい出力:更新された $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}
    ];

    };
}
4

1 に答える 1

13

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最初のスパンで示されているように、( の代わりに) 補間を使用することもできます。

于 2013-09-08T00:47:12.580 に答える