Sudarshan Kalebere Sudarshan Kalebere - 1 year ago 327
AngularJS Question

Plus minus with single textbox in angularjs

I have two buttons and one text box I want, quantities to be increamented by 1 on click of +plus button and decremented by 1 on click of -minus button. But when it reaches to less than 0 or say 0 the decrement button should be disabled. I have this code here

My html code

<form id='myform' >
<button ng-click="increment()" class='qtyminus'>-</button>
<input ng-modal="item.qty" type='text' name='quantity' value='0' class='qty' />
<button ng-click="decrement()" >+</button>

My js code

$scope.increment = function () {
$scope.decrement = function () {

Answer Source
  • Use ng-diabled directive
  • Correct ty typo @ ng-modal, it is ng-model

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.qty = 10;
  $scope.increment = function() {
  $scope.decrement = function() {
<script src=""></script>
<form id='myform' ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="decrement()" class='qtyminus' ng-disabled="qty==0">-</button>
  <input ng-model="qty" type='text' name='quantity' class='qty' />
  <button ng-click="increment()">+</button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download