AngularJS e-commerce application: Deactivate button if quantity falls below 2

Question

AngularJS e-commerce application: Deactivate button if quantity falls below 2

I am currently facing an issue with disabling the 'add' ('+') and 'subtract' ('-') buttons. The functionality should be as follows:

quantity == 1 -> '-' button is disabled

quantity > 1 && quantity < 15 -> both '-' and '+' buttons are enabled

quantity >= 15 -> '+' button is disabled

If you have any suggestions or tips to assist me in resolving this issue, please feel free to share.

You can access my entire application on jsfiddle: https://jsfiddle.net/scgsc7or/23/

I attempted to address it using jQuery's addClass and removeClass, but unfortunately, when integrated into my $scope.addQuantity function, it impacts all buttons rather than just the specific one involved.

Thank you in advance for any insights provided.

html css angularjs

Answer 1

Answer №1

Utilize the ng-disabled directive.

Simply insert your expression into the ng-disabled attribute.

 var app = angular.module('app', []);

 app.controller('MainController', ['$scope', '$http', '$log',
   function($scope, $http, $log) {

     // Controller logic here

   }
 ]);

.container {
  // CSS styles here
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div ng-app='app' class="container">

  <div class="content" ng-controller="MainController">


    <div class="col-xs-6">
      <ul class="list-group itemList">
        <li class="list-group-item" ng-hide="product.isHidden" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)">
          <strong>{{ product.name }}</strong> - {{ product.price | currency }}
        </li>
      </ul>
    </div>

    <div class="col-xs-6 rightPane">
      // Shopping cart UI elements here
    </div>


  </div>

</div>

For a live example, visit this fiddle: https://jsfiddle.net/scgsc7or/24/

Answer 2

Utilize the ng-disabled directive.

Simply insert your expression into the ng-disabled attribute.

 var app = angular.module('app', []);

 app.controller('MainController', ['$scope', '$http', '$log',
   function($scope, $http, $log) {

     // Controller logic here

   }
 ]);

.container {
  // CSS styles here
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div ng-app='app' class="container">

  <div class="content" ng-controller="MainController">


    <div class="col-xs-6">
      <ul class="list-group itemList">
        <li class="list-group-item" ng-hide="product.isHidden" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)">
          <strong>{{ product.name }}</strong> - {{ product.price | currency }}
        </li>
      </ul>
    </div>

    <div class="col-xs-6 rightPane">
      // Shopping cart UI elements here
    </div>


  </div>

</div>

For a live example, visit this fiddle: https://jsfiddle.net/scgsc7or/24/

Answer 3

Answer №2

To make changes to the current ng-repeat scope, it is recommended to use ng-class instead of Jquery.

For the - button:

<button ng-click="addQuantity(id)"
              class="btn btn-xs btn-info pull-right addBtn" 
              ng-class="{disable:product.quantity<2}" >
                        +
                    </button>

For the + button:

   ng-class = "{disable:product.quantity>14}"

CSS:

   .disable{
        opacity:0.2;
        pointer-events:none;
    }

Answer 4

To make changes to the current ng-repeat scope, it is recommended to use ng-class instead of Jquery.

For the - button:

<button ng-click="addQuantity(id)"
              class="btn btn-xs btn-info pull-right addBtn" 
              ng-class="{disable:product.quantity<2}" >
                        +
                    </button>

For the + button:

   ng-class = "{disable:product.quantity>14}"

CSS:

   .disable{
        opacity:0.2;
        pointer-events:none;
    }

AngularJS e-commerce application: Deactivate button if quantity falls below 2

Answer №1

Answer №2

Similar questions

Working with Parse.com's REST API: Implementing skip and limit queries using JavaScript

Using AngularJS ngRepeat to dynamically render a series of iframes by tracking element changes

Adding a clear field icon to an input field: Step-by-step guide

What steps can I take to troubleshoot the cause of my browser freezing when I try to navigate to a different webpage

When taking a vertical picture on my iPhone, my Vue component does not function properly

Looking to switch the markers from circles to icons in the GeoChart component of react-google-charts

The Chocolat.js Lightbox plugin is experiencing issues with jQuery as it is unable to detect the

Leveraging .Net ConfigurationManager.AppSettings in Cascading Style Sheets

What is the Alternative for Angular2's $location.search() for Setting Query Parameters?

The PrimeNG table component in Angular is having trouble maintaining a fixed width

What results can be expected from assessing the statements provided in the following code block? {javascript}

Update an element in array1 using a value from array2 when a link is clicked, efficiently implemented with AngularJS

Having trouble with elFinder? Encountering an error stating "Undefined is not a function" when attempting to

What is the best way to navigate down a page using the <a> tag?

Resources for ExpressJS

Error: Material-UI prop type validation failed - Please specify either `children`, `image`, `src`, or `component` prop

Dreamweaver seems to struggle to properly execute the identical code

Unable to open a modal in Angular UI after closing the initial modal

Tips on revealing div elements using a slide-down animation exclusively with JavaScript

The android web browser and its interactive virtual keyboard