Angular-js: ng-click doesn't work
Shiva
Since I'm very new to angular js, I'm trying to develop small applications, but I'm stuck because ng-click is not working. 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>
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;
}
}
}
Sayetaran
You need to use instead ofthis.selectedOperationselectedOperation
if (this.selectedOperation === "+") {
this.resultValue = num1 + num2;
}
Your function should also assign parameters,
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>