Passing Numeric Value to Variable with ng-click

Question

Hey guys I have the following controller:

(function() {
  'use strict';

  angular
    .module('app.landing')
    .controller('LandingController', LandingController);

    function LandingController($http) {

      var vm = this;
      vm.quantity = 9;
      $http.get('api/getarticles').
      success(function(data, status, headers, config) {
      vm.articles = data;
      });
      $http.get('api/getFeaturedArticles').
      success(function(data, status, headers, config) {
      vm.featuredArticles = data;
      });
      }
})();

And on my view I have this button

<button ng-click="vm.quantity + 3">Add</button>

I am trying to get the button on my view to add a numeric value of 3 to my vm.quantity variable within my controller.

However If I press the button on the front end the value of 3 isn't added to the vm.quantity variable.

Any idea why this might not be working?

Why not you are calling one function on ng-click event.

Arun
– Arun

2016-04-08 13:24:26 +00:00
Commented Apr 8, 2016 at 13:24 — Arun
– Arun, Commented Apr 8, 2016 at 13:24

Alex · Accepted Answer · 2016-04-13 09:09:21Z

4

Your variable is not changed as when you do vm.quantity + 3, the result is not stored anywhere ... you should do :

<button ng-click="vm.quantity = vm.quantity + 3">Add</button>

Or

<button ng-click="addValue(3)">Add</button>

where in your controller :

$scope.addValue = function(value) {
    vm.quantity += value;
};

edited Apr 13, 2016 at 9:09

answered Apr 8, 2016 at 13:24

Alex

4,7194 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Viocartman · Accepted Answer · 2016-04-08 13:24:30Z

1

You could try 2 things : either do something like {{vm.quantity + 3}} so that Angular will evaluate that expression (right now you're missing curly braces) or second : add to ng-click a function something like increment and in the controller do the actual increasing.

Hope it helps

answered Apr 8, 2016 at 13:24

Viocartman

1534 silver badges14 bronze badges

2 Comments

Alex Over a year ago

angular already evaluate the expression as it is written in a Angular directive (ng-click) , curly braces are only needed in standard HTML attributes.

Alex Over a year ago

no problem ;) I was using it intensively last months so I remember few things

Collectives™ on Stack Overflow

Passing Numeric Value to Variable with ng-click

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related