gpt4 book ai didi

javascript - 提交按钮不工作 AngularJS

转载 作者:搜寻专家 更新时间:2023-11-01 05:31:14 25 4
gpt4 key购买 nike

所以基本上我想做的是输入两个数字 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>

这是我的 Angular 代码:

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

var n1=0;
var n2=0;

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

最佳答案

documentation for the ngController directive 中所述,有两种方法可以访问 Controller 的成员:

  1. 使用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被声明为 Controller 实例的名称,其属性使用 fc. 访问

Example

  1. 注入(inject) $scope进入 Controller 并向其添加属性:
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()">

这里, Controller 的属性被添加到$scope这允许我们直接在 HTML 中访问它们,而无需使用点符号。

Example

上面链接的页面比较和对比了这两种方法。您没有完全使用任何一个,这就是您遇到麻烦的原因。

关于javascript - 提交按钮不工作 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27384145/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com