angularjs dynamic multiple select box with quantity

Question

I'm working with AngularJS not Angular and I want to have a corresponding textbox besides the dynamic select box.

I have a working dynamic adding of select box here:

HTML

<div ng-controller='MyController'>
    <div ng-repeat="addon in product_addons track by $index">
        <select    
            ng-model="addon.id" 
            options="products"
            ng-options="product.id as product.name for product in products"
            ng-disabled="product_addons.length > 1 && product_addons.length > $index + 1">
        </select>
        <input type="number" name="quantity">
        <button type="button" ng-click="addAddons($index)">-</button>
    </div>
    <button type="button" ng-click="removeAddon()">Add Product to Addon</button>
</div>

AngularJS

var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);    

function MyController($scope) {

    $scope.products = [
        {id: 1, name: 'prod1', price: 100}, 
        {id: 2, name: 'prod2', price: 100},
        {id: 3, name: 'prod3', price: 100}
    ];  

    $scope.product_addons = [{}];
    
    $scope.addAddons = function(){  
        $scope.product_addons.push({});
    }
    
    $scope.removeAddon = function(index){
        $scope.product_addons.splice(index,1);
    }
}

I want to also have dynamic quantity for each added dynamic select box

Marc · Accepted Answer · 2020-10-24 23:59:33Z

It's kinda hard to follow what you're trying to accomplish, but let me try.

It looks like you just need a function that sums the object values in your array. I.e., for each time you add an item, it pushes onto product_addons array, right?

But you also need to add to your array correctly, which it doesn't appear you're doing.

$scope.sumOfSelections = 0;

//this is a constant set of products
$scope.products = [
    {id: 1, name: 'prod1', price: 100}, 
    {id: 2, name: 'prod2', price: 100},
    {id: 3, name: 'prod3', price: 100}
];

$scope.product_addons = []; //start with empty array

//Add to your array from the product list based on the selected ID
$scope.addAddons = function(selectedId){
   $scope.product_addons.push($scope.products.find(element => element.id == selectedId););
   sumSelections(); //call this in each operation that modifies the product_addons
}

//this does not need to be exposed on $scope
function sumSelections() {
    $scope.sumOfSelections = $scope.product_addons.reduce((a, b) => a.price + b.price);
}

Then in your HTML, you can reference {{sumOfSelections}} and watch it update each time you add a product to $scope.product_addons array.

You will have to work on method to remove an add-on, but it can use similar principles to remove items from the same array.

Collectives™ on Stack Overflow

angularjs dynamic multiple select box with quantity

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related