4

So basically wwhat I'm trying to do is take input of two numbers n1 and n2 and then print their sum all using angular. I have used bootstrap for styling. But i noticed nothing was happening so to check i added alert() function in the function to be called but still it's not getting accessed somehow. I dont know jQuery.

PS: when I use text1+text2 it's concatinating the string instead of printing the sum

This is my html:

<!DOCTYPE html>
<html ng-app="store">
  <head >
    <title>Trying Angular</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css">
  </head>
  <body>
    <form class="form-inline" style="border: 2px solid blue; max-width:500px;" ng-controller="formCtrl as formCtrl" ng-submit="formCtrl.submit()">

    <div class="form-group">
      <label>Enter n1</label>
      <input type="text" class="form-control" placeholder="enter the first number" ng-model="text1">
      <p>{{ text1}}</p>
    </div>


    <div class="form-group">
      <label>Enter n2</label>
      <input type="text" class="form-control" placeholder="enter the second number" ng-model="text2">
      <p >{{text2}}</p>

    </div>
    <div class="form-group"  style="display:block; margin:10px auto; margin-left:370px;">
      <input type="submit" class="form-control"  >
    </div>

     <p>  Your SUM of two numbers is ={{text1+text2}}</p>
   </form>

   <script src="angular.min.js"></script>
   <script  src="exp1.js"></script>
   <script src="jquery.min.js"></script>
   <script src="bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

This is my angular code:

(function(){
    var app=angular.module('store',[]);

    var n1=0;
    var n2=0;

    app.controller('formCtrl',function(){
          this.submit=function(){alert("successful");}; // <----- alert()
    });
})();
Siguza
  • 21,155
  • 6
  • 52
  • 89
FossArduino
  • 161
  • 2
  • 2
  • 11

2 Answers2

5

As explained in the documentation for the ngController directive, there are two ways to access the members of a controller:

  1. Use the as <scopeProperty> syntax, and access it using the <scopeProperty> name:
<form class="form-inline" style="border: 2px solid blue; max-width:500px;" ng-
      controller="formCtrl as fc" ng-submit="fc.submit()">

Here, fc is being declared as the name for the controller instance, and its properties are accessed with fc.

Example

  1. Inject $scope into the controller and add properties to that:
app.controller('formCtrl', ['$scope', function($scope){
     $scope.submit = function(){alert("successful");};
}]);

<form class="form-inline" style="border: 2px solid blue; max-width:500px;" ng-
      controller="formCtrl" ng-submit="submit()">

Here, the controller's properties are added to the $scope and this allows us to access them directly in the HTML without using the dot notation.

Example

The page linked to above compares and contrasts the two approaches. You were not exactly using either, and that's why you were having trouble.

JLRishe
  • 99,490
  • 19
  • 131
  • 169
1

It would be better to add your submit code inside a function:

app.controller('formCtrl',[$scope, function('$scope'){

    $scope.submit = function() {
        alert('submit');
    };

}]);

then in your ng-submit directive use submit() as per documentation you can also use ng-change and ng-click directives to update the models then do whatever with the models.

Further to the comments about accessing the data from the inputs: When you add the ng-model attribute to an input you are saying I would like data from this input to be stored in ng-models name. Adding this to an input: ng-model="inputvalue.input1" would enable you to store data kind of like the following:

inputvalue = {
    input1 : "Input value would go here"
}

note the names are the same for a reason.

You can then set up those objects to be stored/accessed inside the controller using $scope look at the docs on AngularJS website - take your time and get to know what's going on.

user115014
  • 922
  • 14
  • 23
  • Thanks but how to access the values of the inputs? I don't know jquery at all. – FossArduino Dec 09 '14 at 16:53
  • You shouldnt need jquery, in fact it's quite confusing using the two frameworks side by side - a lot of what do using jquery is already available in Angular. The data from the inputs is stored in an object named in ng-model - I'll elaborate in my answer – user115014 Dec 09 '14 at 16:58
  • @FossArduino The above doesn't involve jQuery. You would access your bound properties using `$scope.text1`, `$scope.text2`, etc. – JLRishe Dec 09 '14 at 17:00
  • @mjwatts Looks like you forgot to inject `$scope` into the controller. – JLRishe Dec 09 '14 at 17:00
  • @FossArduino Nobody is suggesting that you use jQuery. – JLRishe Dec 09 '14 at 17:02
  • but codeschool tutorial never uses scope that's why i don't know it – FossArduino Dec 09 '14 at 17:03
  • they simply use this.function – FossArduino Dec 09 '14 at 17:05
  • @FossArduino There's nothing preventing you from learning something that wasn't in the codeschool tutorial. CodeSchool uses the `as ...` syntax in their tutorials, and you were failing to use that. – JLRishe Dec 09 '14 at 17:09
  • But they use as format to asign an alias right? here i'm assigning the same name as the alias just to satisfy the syntax? – FossArduino Dec 09 '14 at 17:11
  • @FossArduino It's probably best not to think of the value after the `as` as an alias. It's more like giving the controller instance a name you can use to access it. If you don't use the `as ...`, there isn't a name you can use to access the controller (AFAIK). – JLRishe Dec 09 '14 at 17:14
  • In fact the alias is the property name – user115014 Dec 09 '14 at 17:16