Combining a user-entered number with a fixed variable in Angular.js

Question

Combining a user-entered number with a fixed variable in Angular.js

Have another question about Angular:

I'm trying to create a functionality where the value entered in the #quantity input is multiplied by the item's price stored in the controller.

For instance, if the price is 99.00 and the user enters a quantity of 2, the result of 99 * 2 should be displayed in the .total div.

How can I achieve this?

Here is the relevant HTML code snippet:

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

A glimpse of my store.controller.js file:

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"
                ]
            },

javascript angularjs

Answer 1

Answer №1

I decided to create a live example showcasing the code provided in the initial question, enhanced with some modifications.

Let's take a closer look at the key snippet of the code:

<div ng-repeat="item in items" ng-show="item.available " class="item-wrapper">
  <div class="full product-details">
    <h1>{{item.name | limitTo: 20}}...</h1>
    <h2 class="full">{{item.price | currency}}</h2>
    <div ng-hide="{{item.stock <= 0}}">
      <input class="voucher-input" placeholder="Enter Voucher Code" />

      <input type="number" ng-model="quantity" max="{{item.stock}}"/>
      <input type="submit" value="Purchase Now" />
      <div class="final-price">
        Total: {{ item.price * quantity | currency }}
      </div>
    </div>
  </div>
</div>

To begin, I included ng-model="quantity" within the input field, establishing quantity as a reusable variable. As each iteration of ng-repeat generates a distinct scope for that section, a unique quantity will be associated with every item in the loop.

Furthermore, I integrated max="{{item.stock}}" into the input element, illustrating the capability to bind an object property to a standard HTML component. If a user inputs a quantity exceeding item.stock, the system sets quantity to NaN.

Lastly, I incorporated the essential calculation

Total:{{ item.price * quantity | currency }}

. In this instance, I applied the currency filter to ensure that if quantity is either 0 or NaN, the output will display as empty instead of displaying NaN.

Answer 2

I decided to create a live example showcasing the code provided in the initial question, enhanced with some modifications.

Let's take a closer look at the key snippet of the code:

<div ng-repeat="item in items" ng-show="item.available " class="item-wrapper">
  <div class="full product-details">
    <h1>{{item.name | limitTo: 20}}...</h1>
    <h2 class="full">{{item.price | currency}}</h2>
    <div ng-hide="{{item.stock <= 0}}">
      <input class="voucher-input" placeholder="Enter Voucher Code" />

      <input type="number" ng-model="quantity" max="{{item.stock}}"/>
      <input type="submit" value="Purchase Now" />
      <div class="final-price">
        Total: {{ item.price * quantity | currency }}
      </div>
    </div>
  </div>
</div>

To begin, I included ng-model="quantity" within the input field, establishing quantity as a reusable variable. As each iteration of ng-repeat generates a distinct scope for that section, a unique quantity will be associated with every item in the loop.

Furthermore, I integrated max="{{item.stock}}" into the input element, illustrating the capability to bind an object property to a standard HTML component. If a user inputs a quantity exceeding item.stock, the system sets quantity to NaN.

Lastly, I incorporated the essential calculation

Total:{{ item.price * quantity | currency }}

. In this instance, I applied the currency filter to ensure that if quantity is either 0 or NaN, the output will display as empty instead of displaying NaN.

Answer 3

Answer №2

Give this code a try:

<div ng-app="customStoreApp" ng-controller="ShopCtrl as shopCtrl">
    <input type="number"  min="0" max="10" id="amount" name="shop-quantity" value='1' ng-model="amount"/>
    <div class="final-price">
        {{ shopCtrl.products[0].cost * amount }}
    </div>
</div>

Also, add the following:

angular.module('customStoreApp', [])
    .controller('ShopCtrl', function ($scope, $http) {
        $scope.amount = 0;
        this.products = [
            {
                name:  'Stylish Sunglasses, Polarized Black',
                cost: 59.99,
                category: 'Accessories',
                inventory: 8,
                inStock: true,
                pictures: [
                    "images/sunglasses.png",
                    "images/bracelet.png"
                ]
           }
       ];
  })

Remember to substitute the item's Id with your own (in this scenario, it's 0)

Take a look at this fiddle: https://jsfiddle.net/rx9qfdyz/

Be careful! Entering a number above 10 will lead to a null result.

Answer 4

Give this code a try:

<div ng-app="customStoreApp" ng-controller="ShopCtrl as shopCtrl">
    <input type="number"  min="0" max="10" id="amount" name="shop-quantity" value='1' ng-model="amount"/>
    <div class="final-price">
        {{ shopCtrl.products[0].cost * amount }}
    </div>
</div>

Also, add the following:

angular.module('customStoreApp', [])
    .controller('ShopCtrl', function ($scope, $http) {
        $scope.amount = 0;
        this.products = [
            {
                name:  'Stylish Sunglasses, Polarized Black',
                cost: 59.99,
                category: 'Accessories',
                inventory: 8,
                inStock: true,
                pictures: [
                    "images/sunglasses.png",
                    "images/bracelet.png"
                ]
           }
       ];
  })

Remember to substitute the item's Id with your own (in this scenario, it's 0)

Take a look at this fiddle: https://jsfiddle.net/rx9qfdyz/

Be careful! Entering a number above 10 will lead to a null result.

Combining a user-entered number with a fixed variable in Angular.js

Answer №1

Answer №2

Similar questions

Creating a mask overlay that covers the entire screen while excluding a specific sibling div

Specifying the data type of the input being passed into a .css() function within a jQuery ID selector

Do you need to have knowledge in reactjs in order to master react-native?

What is the purpose of the 'onClassExtended' function in Extjs 6 for class definition?

Is it possible to apply withStyles to the output of a function?

Node.js and Express make it easy to provide XLS download functionality

Error encountered in ASP.NET MVC when using AngularJS due to an unknown provider

The page continues to refresh even after the fetch() method is called and the promise is resolved, despite setting e.preventDefault()

Authentication using tokens - JSON Web Tokens

What could be causing the issue of Vuejs 3.3 defineModel consistently returning undefined?

Two events in an arrow-guided grid including a text box (jQuery)

Incorporating a new text tag

Manipulating DOM elements using JavaScript Vanilla with the Jquery <<S.fn.init [selector]>> framework

What is the method for retrieving the hashed classname set by CSS Modules within a functional react component?

Extracting information from this array using JavaScript

Display the device model using Google Cloud Monitoring API

How to create a gelatin-like effect on a rectangle using HTML5 canvas

What is the reason that the name property does not display anything in the Edge browser after compression?

Using the 'type' field as a parameter in a Vue2 component object

Textillate JS-JQuery animations are never the go-to choice (they all look alike)