admin管理员组

文章数量:1317910

I am trying to create a multiplication function in an angularjs controller. I want the function to return the product of quantity and price. I'm using the snippet below, but it's 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>

I am trying to create a multiplication function in an angularjs controller. I want the function to return the product of quantity and price. I'm using the snippet below, but it's 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>
  • javascript
  • html
  • angularjs
Share Improve this question edited Dec 29, 2014 at 14:03 fredtantini 16.6k8 gold badges51 silver badges58 bronze badges asked Dec 29, 2014 at 12:33 Toxiedo212Toxiedo212 531 silver badge5 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 5

In this simple example you do not 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 create it - see mistakes:

  • angulars interpolation syntax {{ }} is only used in HTML, not javascript.
  • Use $scope, not scope
  • formatting your code is important.

Here is an example using the currency filter. You might also want to take a look at the number filter.

Note: Starting in angular 1.3.0 the currency filter lets you add a fractionSize.

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./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>

<script> function personController(scope) {
    var input1 =  scope.quantity;,
    var input2 = scope.price;
    $scope.fullName = function() {
        return {{input1 * input2}};
    }
 }
 </script>

</body> </html>

There is a clear syntax error here which is {{input * input2}}. This is angularjs expression syntax, not javascript syntax. Try just using input * input2. You are also referring to $scope which is not available, so change to 'scope':

    scope.fullName = function() {
        return input1 * input2;
    }

Or, you could refer to the scope variables directly

    scope.fullName = function() {
        return scope.quantity * scope.price;
    }

Or you could refer to 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>

you are not using $scope? thats not local variable that is injected $scope so name cannot be changes as we do with the argument names of loval variables

There were syntax errors as well i have refactored your code

Working demo 

angular.module('test',[]).controller('personController', function ($scope) {    
     $scope.price = 0;
     $scope.quantity=0
 
     }); 
<script src="https://ajax.googleapis./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>

本文标签： javascriptCreating a multiplication function in an angularjs controllerStack Overflow

版权声明：本文标题：javascript - Creating a multiplication function in an angularjs controller? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742010934a2412870.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。