javascript - Angular .js : How to add userinput for price and keep subtotal-6ren

javascript - Angular .js : How to add userinput for price and keep subtotal

转载作者：行者123 更新时间：2023-11-28 00:15:53

全部。我正在尝试制作一个包含一系列食物的购物 list ，并且在每个食物旁边提示用户输入价格和数量，然后保持所有元素的运行小计我有基本的但真的在“价格盒”中苦苦挣扎数量和小计。

var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["Milk", "Bread", "Cheese"];

  $scope.addItem = function() {
    $scope.errortext = "";
    if (!$scope.addMe) {
      return;
    }
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "The item is already in your shopping list.";
    }
  }
  $scope.removeItem = function(x) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
  }
});

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>
  <div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">
    <header class="w3-container w3-light-grey w3-padding-16">
      <h3>My Shopping List</h3>
    </header>
    <ul class="w3-ul">
      <li><input type="text" name="price" class="price" style="width: 50px" /></li>
      <li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li>
    </ul>
    <div class="w3-container w3-light-grey w3-padding-16">
      <div class="w3-row w3-margin-top">
        <div class="w3-col s10">
          <input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding">
        </div>
        <div class="w3-col s2">
          <button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button>
        </div>
      </div>
      <p class="w3-text-red">{{errortext}}</p>
    </div>
  </div>
</body>
</html>

最佳答案

确实有更好的代码结构方式，但最重要的是，您需要让您的产品数组包含具有您需要的所有属性(名称、数量和价格)的对象，并且当您添加一个元素时，您只需推送整个数组的新对象，而不仅仅是名称。在你的 ng-repeat 中有一个对象意味着现在你需要相应地访问你需要在你的 View 中显示的属性。请看代码片段

var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = [{
      name: "Milk",
      quantity: 1,
      price: 2.00
    },
    {
      name: "Bread",
      quantity: 2,
      price: 4.00
    },
    {
      name: "Cheese",
      quantity: 3,
      price: 6.00
    }
  ];

  $scope.quantity = 1;

  $scope.getTotal = function() {
    var total = 0;
    for (var i = 0; i < $scope.products.length; i++) {
      total += $scope.products[i].quantity * $scope.products[i].price;
    }
    return total;
  }

  $scope.addItem = function() {
    $scope.errortext = "";
    if (!$scope.addMe) {
      return;
    }
    if (true /*need a new way to check for duplicates */ ) {
      $scope.products.push({
        name: $scope.addMe,
        quantity: $scope.quantity || 0,
        price: $scope.price || 0
      });
    } else {
      $scope.errortext = "The item is already in your shopping list.";
    }
  }
  $scope.removeItem = function(x) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
  }
});

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>
  <div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">
    <header class="w3-container w3-light-grey w3-padding-16">
      <h3>My Shopping List</h3>
    </header>
    <ul class="w3-ul">
      <li><input type="text" name="price" class="price" style="width: 50px" /></li>
      <li ng-repeat="x in products" class="w3-padding-16">{{x.name}} |
        <input style="width: 50px" type="number" ng-model="x.quantity" min="0"> | $
        <input style="width: 50px" type="number" ng-model="x.price" min="0"> | Subtotal ${{x.quantity * x.price}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li>
    </ul>
    Total ${{getTotal()}}
    <div class="w3-container w3-light-grey w3-padding-16">
      <div class="w3-row w3-margin-top">
        <div class="w3-col s10">
          <input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding">
          <input placeholder="Quantity" ng-model="quantity" type="number" min="1">
          <input placeholder="Price" ng-model="price" type="number" min="1">
        </div>
        <div class="w3-col s2">
          <button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button>
        </div>
      </div>
      <p class="w3-text-red">{{errortext}}</p>
    </div>
  </div>
</body>

</html>

关于javascript - Angular .js : How to add userinput for price and keep subtotal，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55114482/

文章推荐： css - 可通过动画更改并可通过 [attribute=value] 访问的属性

文章推荐： CSS 关键帧动画在中间暂停然后再次恢复？

文章推荐： php - 如何使 Web 应用程序在线和离线工作

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Angular .js : How to add userinput for price and keep subtotal