Angular-js:ng-click is not working

Question

as I am very new to angular js so I am trying to develop small app but I have got stuck because ng-click is not working it seems. Please help. Thanks in advance. Here is my code: HTML file:

    <html ng-app="MyApp">

<head>
    <title>Angular Demo App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
    <script src="app.js"></script>
</head>

<body>
    <div ng-controller="MyCtrl as ctrl">
        <h1>My Calculator</h1>
        <input type="text" ng-model="ctrl.input1"></input>
        <span ng-bind="this.selectedOperation"></span>
        <input type="text" ng-model="ctrl.input2"></input>
        <button ng-click="ctrl.computeResult()">=</button>
        <span ng-bind="ctrl.resultValue"></span>
        <p>Choose the operation:
            <button ng-click="ctrl.buttonClicked('+')">+</button>
            <button ng-click="ctrl.buttonClicked('-')">-</button>
            <button ng-click="ctrl.buttonClicked('*')">*</button>
            <button ng-click="ctrl.buttonClicked('/')">/</button>
        </p>
    </div>
</body>

</html>

And here is the controller:

    var app = angular.module("MyApp", []);
app.controller("MyCtrl", MyCtrl);

function MyCtrl() {

    this.buttonClicked = function (button) {
        this.selectedOperation = "button";
    }
    this.computeResult = function () {
        var num1 = parseFloat(this.input1);
        var num2 = parseFloat(this.input2);

        if (selectedOperation === "+") {
            this.resultValue = num1 + num2;
        } else if (selectedOperation === "-") {
            this.resultValue = num1 - num2;
        } else if (selectedOperation === "*") {
            this.resultValue = num1 * num2;
        } else if (selectedOperation === "/") {
            this.resultValue = num1 / num2;
        }

    }

}

Hi Alex, the main problem is my buttons are not working, when I click '+' button, ideally it should get reflected on the screen but I am not able to see this on the screen. — Shivam
– Shivam, Commented Aug 25, 2017 at 19:06

Sajeetharan · Accepted Answer · 2017-08-25 19:16:22Z

1

You need to use this.selectedOperation instead of selectedOperation

if (this.selectedOperation === "+") {
  this.resultValue = num1 + num2;
}

also your function should assign the parameter,

 this.buttonClicked = function (button) {
        this.selectedOperation = button;
    }

DEMO

var app = angular.module("MyApp", []);
app.controller("MyCtrl", MyCtrl);
function MyCtrl() {
   
    this.buttonClicked = function (button) {
        this.selectedOperation = button;
    }
    this.computeResult = function () {
        var num1 = parseFloat(this.input1);
        var num2 = parseFloat(this.input2);
        if (this.selectedOperation === "+") {
            this.resultValue = num1 + num2;
        } else if (this.selectedOperation === "-") {
            this.resultValue = num1 - num2;
        } else if (this.selectedOperation === "*") {
            this.resultValue = num1 * num2;
        } else if (this.selectedOperation === "/") {
            this.resultValue = num1 / num2;
        }

    }

}

<html ng-app="MyApp">
<head>
    <title>Angular Demo App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>
<body>
    <div ng-controller="MyCtrl as ctrl">
        <h1>My Calculator</h1>
        <input type="text" ng-model="ctrl.input1">
        <span ng-bind="ctrl.selectedOperation"></span>
        <input type="text" ng-model="ctrl.input2">
        <button ng-click="ctrl.computeResult()">=</button>
        <span ng-bind="ctrl.resultValue"></span>
        <p>Choose the operation:
            <button ng-click="ctrl.buttonClicked('+')">+</button>
            <button ng-click="ctrl.buttonClicked('-')">-</button>
            <button ng-click="ctrl.buttonClicked('*')">*</button>
            <button ng-click="ctrl.buttonClicked('/')">/</button>
        </p>
    </div>
</body>

</html>

edited Aug 25, 2017 at 19:16

answered Aug 25, 2017 at 18:54

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

6 Comments

Shivam Over a year ago

thanks Sajeetharan, but the buttons which I have used for operations itself are not working, when I click '+' button , I am not able to see on the screen.

Sajeetharan Over a year ago

where do you want to see?

Shivam Over a year ago

Ideally, what should happen is when I click '+' button then buttonClicked method should be invoked and there selectedOperation property should be set as '+' and it should be reflected in span tag (as I have used ng-bind )which is written in html file but its not happening I guess.

Sajeetharan Over a year ago

you should use <span ng-bind="ctrl.selectedOperation"></span> . check the updated demo. mark as answer if it helped

Shivam Over a year ago

I got this error this time: Uncaught Error: [$injector:modulerr]. still facing the same issue

|

Collectives™ on Stack Overflow

Angular-js:ng-click is not working

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related