Question

所以基本上我想要做的是输入两个数字n1和n2，然后使用angular打印它们的总和。我用过bootstrap来造型。但我注意到没有发生任何事情，所以检查我在要调用的函数中添加了alert()函数，但仍然没有以某种方式访问它。我不懂jQuery。

PS：当我使用text1+text2时，它正在整理字符串而不是打印总和

这是我的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>

这是我的角度代码：

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

    var n1=0;
    var n2=0;

    app.controller('formCtrl',function(){
          this.submit=function(){alert("successful");}; // <----- alert()
    });
})();

Answer 1

如documentation for the ngController directive中所述，有两种方法可以访问控制器的成员：

使用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.

Example

将$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中访问它们，而无需使用点符号。

Example

上面链接的页面比较和对比了这两种方法。你并没有完全使用它们，这就是你遇到麻烦的原因。

Answer 2

最好在函数中添加提交代码：

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

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

}]);

然后在你的ng-submit指令中按照documentation使用submit（），你也可以使用ng-change和ng-click指令更新模型，然后对模型做任何事情。

继续关于从输入中访问数据的评论： 当您将ng-model属性添加到输入时，您说我希望此输入中的数据存储在ng-models名称中。将其添加到输入中： ng-model =＆＃34; inputvalue.input1＆＃34; 将使您能够存储如下类型的数据：

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

请注意名称是相同的原因。

然后，您可以使用AngularJS网站上的$ scope look at the docs设置要在控制器内存储/访问的对象 - 花点时间了解发生了什么。

提交按钮不工作AngularJS

2 个答案: