The submit button not working AngularJS

javascript angularjs twitter-bootstrap angularjs-directive angularjs-scope

12,918

Solution 1

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

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

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.

Solution 2

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.

12,918

Author by

FossArduino

interested in learning new things

Updated on June 20, 2022

Comments

FossArduino almost 2 years

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()
    });
})();