Geek Answers Handbook

Submit button does not work AngularJS

So basically, I try to input two numbers n1 and n2, and then print their sum using angular. I used bootstrap for styling. But I noticed that nothing happens, therefore, to check that a function has been added alert()to the called function, but they still do not receive it. I do not know jQuery.

PS: when I use text1+text2, it concatenates 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()
    });
})();
+4
source share
2 answers

ngController, :

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

fc , fc.

  1. $scope :
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()">

$scope, HTML .

. , .

+5

:

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

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

}]);

ng-submit submit() ng-change ng-click , .

: ng-model , , , ng-models. : ng-model = "inputvalue.input1" :

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

, .

/ , $scope - AngularJS - , .

+1

More articles:


All Articles