Creating a multiply function in angularjs controller?
I am trying to create a multiply function in angularjs controller. I want the function to return the product of quantity and price. I am using the snippet below, but it is returning an error. What am I doing wrong?
<!DOCTYPE html> <html>
<head> <script src= "Angular.js"></script> </head>
<body>
<div ng-app="" ng-controller="personController">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{fullname()}}</p>
</div>
<script> function personController(scope) { var input1 = scope.quantity , var input2 = scope.price ,
$scope.fullName = function() {
return {{input1 * input2}};
} } </script>
</body> </html>
source to share
For this simple example, you don't need to create a controller.
See here
<h2>Cost Calculator</h2>
Quantity:
<input type="number" ng-model="quantity">Price:
<input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity*price}}</p>
</div>
But, if you need to create it - see errors:
- Angle interpolation syntax
{{ }}
is only used in HTML, not in javascript. - Use
$scope
notscope
- code formatting is important.
source to share
Here is an example of using the currency filter. You can also take a look at the numeric filter .
Note. Since angular 1.3.0, the currency filter allows you to add a fractional fraction.
angular.module('myApp',[])
.controller('personController', ['$scope', function($scope) {
$scope.price = 0;
$scope.quantity = 0;
$scope.total = function() {
return $scope.price * $scope.quantity;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="personController">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in dollars:</b> {{ total() | currency : $ }}</p>
</div>
source to share
are you not using $scope
? it is not a local variable that is injected $scope
, so the name cannot be changed as we do with argument names for variables like
There were syntax errors and also I edited your code
Working demo
angular.module('test',[]).controller('personController', function ($scope) {
$scope.price = 0;
$scope.quantity=0
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html> <html>
<head> <script src= "Angular.js"></script> </head>
<body>
<div ng-app="test" ng-controller="personController">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity*price}}</p>
</div>
</body> </html>
source to share
<script> function personController(scope) {
var input1 = scope.quantity;,
var input2 = scope.price;
$scope.fullName = function() {
return {{input1 * input2}};
}
}
</script>
</body> </html>
There is an obvious syntax error here: {{input * input2}}. This is angularjs expression syntax, not javascript syntax. Try using * input2. You are also referencing $ scope which is not available, so change it to 'scope':
scope.fullName = function() {
return input1 * input2;
}
Or you can directly reference the scope variables
scope.fullName = function() {
return scope.quantity * scope.price;
}
Or you can access them directly in the template:
<!DOCTYPE html> <html>
<head> <script src= "Angular.js"></script> </head>
<body>
<div ng-app="">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity * price}}</p>
</div>
</body> </html>
source to share