Download Project

Post your any code related problem to www.abctutorial.com

Follow the previous video and articles to complete the POS tutorials

Step-1:

• After adding row, onclick on the product dropdown we will set product category, price in the same rows other columns. So use this below method in HomeInvoiceController.js

 $scope.SetValueOfProduct = function (productId) {
            var dataObj = $filter('filter')($scope.ProductList, { ProductId: parseInt(productId) }[0];
            const index = $scope.InvoiceCart.findIndex((x) => x.ProductId === productId);
            $scope.InvoiceCart[index].CategoryName = dataObj.CategoryName;
            $scope.InvoiceCart[index].UnitPrice = dataObj.SalesPrice;
            $scope.InvoiceCart[index].LineTotal = $scope.InvoiceCart[index].UnitPrice * $scope.InvoiceCart[index].Quantity;
        }

• Use this code to trigger SetValueOfProduct method after click on the product

<select ng-model="cart.ProductId" ng-click="SetValueOfProduct(cart.ProductId);SubTotalCalculation();">
                                    <option>--Select--</option>
                                    <option ng-repeat="product in ProductList" value="{{product.ProductId}}">{{product.Name}}</option>
                                </select>

• If we change the quantity from Invoice editable row then another method will call to set new Line Total based on your provided quantity.

         $scope.OnChangeLineTotalSet = function (productId) {

            const index = $scope.InvoiceCart.findIndex((x) => x.ProductId === productId);

            $scope.InvoiceCart[index].LineTotal = $scope.InvoiceCart[index].UnitPrice * $scope.InvoiceCart[index].Quantity;
        }

Step-2:

Run this project and see the output