Angularjs: Benutzerdefinierte Array-Größe/Array-Größe als anpassbare Drop-Down

Ich bin neu bei angularjs. Ich versuche eine App für Einkaufswagen zu erstellen. Bis jetzt läuft es glatt. Ich muss jedoch das Feld "Menge" zum Abschnitt "Artikel zum Shop hinzufügen" hinzufügen. Diese Menge sollte als Drop-Down mit der Anzahl der Einheiten für einen bestimmten Artikel angezeigt werden.Angularjs: Benutzerdefinierte Array-Größe/Array-Größe als anpassbare Drop-Down

Der Benutzer sollte in der Lage sein, die Menge jedes Mal zu wählen, und die Menge sollte der Preis des Artikels sein * Menge der Artikel + gesamte Artikel. Kann ich das erreichen?

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <h1>Select item(s) and add to cart:</h1> 
    <div ng-repeat="item in items"> 
     <label> 
      <input type="checkbox" ng-model="item.isSelected" /> 
      <span>{{item.name}}</span> 
      <span>{{item.price}}</span> 
     </label> 
    </div> 
    <hr> 
    <p>Add items to shop</p> 
    Enter name: <input type="text" ng-model="newItemname" /> 
    Enter price: <input type="text" ng-model="newItemprice" /> 
    <button ng-click="addtoshop()">Add to shop</button> 
    <hr> 
    <h1>Add items to shopping cart</h1> 
    <button ng-click="addtocart((items | filter : { isSelected:true }))">Shop!</button> 
    <hr> 
    <p ng-model="amount">{{amount}}</p> 
    <script> 
     var app = angular.module('myApp', []); 
     app.controller('myCtrl', function ($scope) { 
      $scope.items = [ 
      { name: "Bread", price: 20, isSelected: false }, 
      { name: "Butter", price: 25, isSelected: false }, 
      { name: "Jam", price: 30, isSelected: false }, 
      ]; 
      $scope.addtoshop = function() { 
       var newitem = {}; 
       newitem.name = $scope.newItemname; 
       newitem.price = $scope.newItemprice; 
       newitem.qty = $scope.newItemqty; 
      } 
      $scope.addtocart = function (index) { 
       alert("You chose " + index.length + " items."); 
       var p = 0, i; 
       for (i = 0; i < index.length; i++) { 
        p += parseInt(index[i].price); 
       } 
       alert("Shopping price: " + p); 
       $scope.amount = p; 
      }; 
     }); 
    </script> 
</body> 
</html>

Quelle

2017-11-20 sidd68

Trotz der Tatsache, dass der Code einige Umgestaltung benötigt (zB addtocart Funktion etwas hinzufügen, nicht wirklich, es neu berechnet nur bereits hinzugefügten Elemente), können Sie erreichen, was Sie zu jedem Artikel durch Hinzufügen quantity Eigenschaft benötigen, und range Filter, der Auswahlbox mit 1-100 Werten (oder was auch immer min/max Sie benötigen) behandeln wird.

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <h1>Select item(s) and add to cart:</h1> 
    <div ng-repeat="item in items"> 
     <label> 
      <input type="checkbox" ng-model="item.isSelected" /> 
      <span>{{item.name}}</span> 
      <span>{{item.price}}</span> 
     </label> 

     Select Quantity: 
     <select ng-model="item.quantity" ng-option="num in [] | range: 1 : 100"></select> 
    </div> 
    <hr> 
    <p>Add items to shop</p> 
    Enter name: <input type="text" ng-model="newItemname" /> 
    Enter price: <input type="text" ng-model="newItemprice" /> 
    <button ng-click="addtoshop()">Add to shop</button> 
    <hr> 
    <h1>Add items to shopping cart</h1> 
    <button ng-click="addtocart((items | filter : { isSelected:true }))">Shop!</button> 
    <hr> 
    <p ng-model="amount">{{amount}}</p> 
    <script> 
     var app = angular.module('myApp', []); 

     app.controller('myCtrl', function ($scope) { 
      $scope.items = [ 
       { name: "Bread", price: 20, isSelected: false, quantity: 1 }, 
       { name: "Butter", price: 25, isSelected: false, quantity: 1 }, 
       { name: "Jam", price: 30, isSelected: false, quantity: 1 }, 
      ]; 

      $scope.addtoshop = function() { 
       var newitem = {}; 
       newitem.name = $scope.newItemname; 
       newitem.price = $scope.newItemprice; 
       newitem.qty = $scope.newItemqty; 
       newitem.qty = 1; 
      }; 

      $scope.addtocart = function (index) { 
       alert("You chose " + index.length + " items."); 
       var p = 0, i; 
       for (i = 0; i < index.length; i++) { 
        p += parseInt(index[i].price * index[i].quantity); 
       } 
       alert("Shopping price: " + p); 
       $scope.amount = p; 
      }; 
     }); 

     app.filter('range', function() { 
      return function(input, start, end) { 
       start = parseInt(start); 
       end = parseInt(end); 

       for (var i=start; i<=end; i++) { 
       input.push(i); 
      } 

      return input; 
      }; 
     }) 
    </script> 
</body> 
</html>

Quelle

2017-11-20 13:55:54 TheSameSon

Angularjs: Benutzerdefinierte Array-Größe/Array-Größe als anpassbare Drop-Down

Antwort

Verwandte Themen