Question

另一个有争议的问题：

目的是使其在#quantity输入中输入的值是采用的值，并按项目的价格计算，如控制器中列出的那样。

例如，如果价格为99.00且用户希望数量为2，则99 * 2的结果将输出到.total div中。

我将如何创建这个？

我的HTML如下：

  <input type="number"  min="0" max="10" id="quantity" name="store-quantity" value='1'/>
  <div class="total">
    <!-- Total to be printed here -->
  </div>

我的store.controller.js的小片段

angular.module('angularStoreApp')
  .controller('StoreCtrl', function ($scope, $http) {
    var item = [
      {
        name:  'Almond Toe Court Shoes, Patent Black',
        price: 99.00,
        category: 'Womens Footware',
        stock: 5,
        canPurchase: true,
        images: [
          "assets/images/yeoman.png",
          "http://billypurvis.co.uk/wp-content/uploads/2015/06/ACTA.png"

        ]
      },

Answer 1

我根据最初在问题中的代码创建了一个带有示例的plunker，并进行了一些扩充。

以下是代码的相关部分：

<div ng-repeat="product in products" ng-show="product.canPurchase " class="item-panel">
  <div class="pull-left full product-info">
    <h1>{{product.name | limitTo: 20}}...</h1>
    <h2 class="pull-left full">{{product.price | currency}}</h2>
    <div ng-hide="{{product.stock <= 0}}">
      <input class="pull-left voucher-input" placeholder="Voucher Code" />

      <input type="number" ng-model="quantity" max="{{product.stock}}"/>
      <input type="submit" value="Add to Cart" />
      <div class="total">
        Total:{{ product.price * quantity | currency }}
      </div>
    </div>
  </div>
</div>

请注意，我首先将ng-model="quantity"添加到输入字段，提供quantity作为可以访问的变量。因为ng-repeat的每次迭代都会为该块创建一个新的范围，所以会有一个quantity变量作为重复中每个产品的范围。

接下来，我将max="{{product.stock}}"添加到输入中，以演示您可以将对象上的属性绑定到纯HTML元素项。如果您输入的数量大于product.stock，则quantity设置为NaN。

最后，我添加了实际的计算Total:{{ product.price * quantity | currency }}。在这里，我使用了货币过滤器，这也确保如果quantity为0或NaN，则显示为空白而不是NaN。

Answer 2

试试这段代码：

<div ng-app="angularStoreApp" ng-controller="StoreCtrl as storeCtrl">
    <input type="number"  min="0" max="10" id="quantity" name="store-quantity" value='1' ng-model="quantity"/>
    <div class="total">
        {{ storeCtrl.item[0].price * quantity }}
    </div>
</div>

和

angular.module('angularStoreApp', [])
    .controller('StoreCtrl', function ($scope, $http) {
        $scope.quantity = 0;
        this.item = [
            {
                name:  'Almond Toe Court Shoes, Patent Black',
                price: 99.00,
                category: 'Womens Footware',
                stock: 5,
                canPurchase: true,
                images: [
                    "assets/images/yeoman.png",
                    "http://billypurvis.co.uk/wp-content/uploads/2015/06/ACTA.png"
                ]
           }
       ];
  })

将itemId替换为您的项目ID（在您的情况下为0）

看到这个小提琴：https://jsfiddle.net/pk5qfdyx/

警告！如果输入的数字超过10，则结果为空。

使用Angular.js中的预设变量添加用户输入数字

2 个答案: