Writing an adding function in AngularJS

Question

I'm new to AngularJS and I am doing some tutorials to get in touch with it. While I'm doing the tutorials I have modified the code a bit to get a better feeling of what's behind. My code consists of two parts, which have nothing to do with each other.

The first one is a simple user input and based on that a list gets filtered. This is working fine.

However, in the second part I was trying to implement a simple adding function where the user can give an input and based on that the sum of two numbers is calculated. This part is not working at all. The numbers are being recognised as strings. The code is basically from this source here. When I copy the whole code and run it, it works fine, but when I modify it a bit it doesn't.

I want to understand why my code isn't working. To me there is nearly no difference. So I think that I eventually misunderstood the concept of angularjs. But I can't figure out where the error could be.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
    function TodoCtrl($scope) {
        $scope.total = function () {
            return $scope.x + $scope.y;
        };
    }
</script>
</head>
<body data-ng-app>
    <input type="text" ng-model="name">{{name}}
    <div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
        <ul>
            <li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
        </ul>
    </div>

    <div data-ng-controller="TodoCtrl">
        <form>
        <input type="text" ng-model ="x">{{x}}
        <input type="text" ng-model ="y"> {{y}}
        <input type="text" value="{{total()}}"/>
        <p type= "text" value="{{total()}}">value</p>
        </form>
    </div>
</body>
</html>

the code in the article you linked was using angularjs 1.0.5, in 2013. that syntax hasn't been valid since angularjs 1.2, in 2015. — Claies
– Claies, Commented Sep 16, 2017 at 15:21

Matthew Cawley · Accepted Answer · 2017-09-16 15:32:05Z

Several things to change...

First you need to create a module:

var app = angular.module("myApp", []);

Then you need to define a module e.g. myApp on the ng-app directive.

<body data-ng-app="myApp">

Then you need to add TodoCtrl to the module:

app.controller("TodoCtrl", TodoCtrl);

Also check that both $scope.x and $scope.y have values, and make sure that they are both parsed as integers, otherwise you will get string concatenation ("1"+"1"="11") instead of addition (1+1=2)!

$scope.total = function () {
  return ($scope.x && $scope.y) 
    ? parseInt($scope.x) + parseInt($scope.y)
    : 0;
  };

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
(function(){

    var app = angular.module("myApp", []);

    app.controller("TodoCtrl", TodoCtrl);

    function TodoCtrl($scope) {
        $scope.total = function () {
            return ($scope.x && $scope.y) 
              ? parseInt($scope.x) + parseInt($scope.y)
              : 0;
        };
    }
}());
</script>
</head>
<body data-ng-app="myApp">
    <input type="text" ng-model="name">{{name}}
    <div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
        <ul>
            <li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
        </ul>
    </div>

    <div data-ng-controller="TodoCtrl">
        <form>
        <input type="text" ng-model ="x">{{x}}
        <input type="text" ng-model ="y"> {{y}}
        <input type="text" value="{{total()}}"/>
        <p type= "text" value="{{total()}}">value</p>
        </form>
    </div>
</body>
</html>

Sajeetharan · Accepted Answer · 2017-09-16 15:37:34Z

As mentioned in the above two answers adding TodoCtrl as controller instead function will make the snippet work.

REASON:

Angularjs framework above 1.3 does not support global function which means declaring controller as function wont work.

In your code snippet, you are using angular version 1.5, which needs the controller to be defined.

DEMO

angular.module("app",[]) 
.controller("TodoCtrl",function($scope){
      $scope.x = 0;
      $scope.y = 0;
        $scope.total = function () {
            return parseInt($scope.x) + parseInt($scope.y)
     }; 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" >
    <input type="text" ng-model="name">{{name}}
    <div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
        <ul>
          <li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
        </ul>
    </div>
    <div data-ng-controller="TodoCtrl">
        <form>
        <input type="text" ng-model ="x">{{x}}
        <input type="text" ng-model ="y"> {{y}}
        <input type="text" value="{{total()}}"/>
        <p type= "text" value="{{total()}}">value</p>
        </form>
    </div>
</div>

Sachila Ranawaka · Accepted Answer · 2017-09-16 15:18:28Z

1

you need to define the TodoCtrl as controller instead function

.controller("TodoCtrl",function($scope){
          $scope.x = 0;
          $scope.y = 0;
            $scope.total = function () {
                return parseInt($scope.x) + parseInt($scope.y)
            }; 
 })

Demo

angular.module("app",[]) 
.controller("TodoCtrl",function($scope){
      $scope.x = 0;
      $scope.y = 0;
        $scope.total = function () {
            return parseInt($scope.x) + parseInt($scope.y)
        }; 
     
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" >
    <input type="text" ng-model="name">{{name}}
    <div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
        <ul>
            <li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
        </ul>
    </div>

    <div data-ng-controller="TodoCtrl">
        <form>
        <input type="text" ng-model ="x">{{x}}
        <input type="text" ng-model ="y"> {{y}}
        <input type="text" value="{{total()}}"/>
        <p type= "text" value="{{total()}}">value</p>
        </form>
    </div>
</div>

answered Sep 16, 2017 at 15:18

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

2 Comments

Pluxyy Over a year ago

Thanks, this helped, but how does the code from the source [stackoverflow.com/questions/15648711/… work for me, even though I didn't define "TodoCtrl" as controller?

Sachila Ranawaka Over a year ago

it doesn't even define the angular.module also. if you are using angular you need to follow the protocols provided by the framework. This is the proper way define the module

Collectives™ on Stack Overflow

Writing an adding function in AngularJS

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related