AngularJS: Number not updating when function is called?

Question

HTML:

<div ng-controller="MainCtrl as ctrl">
    <input type="text" ng-model="ctrl.number">
    <h2>{{ctrl.number}}</h2>

    <button ng-click="ctrl.factorial(ctrl.number)">
        Click
    </button>
</div>

JS:

angular
    .module('myApp', [])
    .controller('MainCtrl', MainCtrl)

    function MainCtrl() {
        var ctrl = this;

        ctrl.number = 5;

        ctrl.factorial = function(num) {
            if (num === 1) {
                return 1;
            } else {
                return num * ctrl.factorial(num-1)
            }
        } // factorial
    }

The number is just staying the way it is, its factorial not being shown. How do I fix this? I'm really lost.

You are not consumig the value returned by function

Rimpy
– Rimpy

2016-05-14 00:45:34 +00:00
Commented May 14, 2016 at 0:45 — Rimpy
– Rimpy, Commented May 14, 2016 at 0:45

juvian · Accepted Answer · 2016-05-14 00:45:22Z

1

When you pass ctrl.number to the function, its a number so its value is copied. In the function you calculate with recursion the corresponding factorial, but you are just returning it and not changing ctrl.number, which is what you really want.

Easy fix would be to change ng-click="ctrl.factorial(ctrl.number) to ng-click="ctrl.number = ctrl.factorial(ctrl.number)

answered May 14, 2016 at 0:45

juvian

16.1k2 gold badges42 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

AngularJS: Number not updating when function is called?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related