我开始创建一个AngularJS表单,我的AngularJS应用程序的其他部分工作得很好。
html文件看起来像这样
<form role="form" ng-submit="submitForm()">
<div class="form-group">
<label for="fullName">Name</label>
<input type="text" id="fullName" name="fullName" class="form-control"
ng-model="employee.fullName" />
</div>
<div class="col-sm-offset-3 col-sm-9">
<input type="submit" class="btn btn-primary" value="Submit"
ng-click="submitForm()" />
</div>
</form>
控制器
var QuestionEditController = function ($location, questionService, $env) {
var employee = {};
console.log('pre employee', employee); // this works
submitForm = function () {
console.log('employee', employee); // clicking on submit button does not make it in here
};
我正在使用ui-router,看起来像这样
.state("editquestion",
{
url: "/editquestion",
templateUrl: viewBase + "questionEdit.html",
controller: "QuestionEditController",
controllerAs: "vm"
});
};
我有一个简单的指令,它只是显示html代码模板,但我看不出这会导致问题,我做错了什么?
更新
好的,问题确实是ng-click。
然而,我想知道我是否在创建更多的“混乱”外观我甚至在submitForm前面添加了什么(vm。)
新HTML
<form role="form" ng-submit="vm.submitForm()">
<div class="form-group">
<label for="fullName">Name</label>
<input type="text" id="fullName" name="fullName" class="form-control"
ng-model="vm.employee.fullName" />
</div>
<div class="col-sm-offset-3 col-sm-9">
<input type="submit" class="btn btn-primary" value="Submit"/>
</div>
</form>
控制器已更新
var QuestionEditController = function ($location, questionService, $env) {
var vm = this;
vm.employee = {};
console.log('pre employee', vm.employee);
vm.submitForm = function () {
console.log('employee', vm.employee);
};
};
我正在做什么,有些还是没有?
答案 0 :(得分:2)
由于documentation您不需要ng-click
指令来解雇ng-submit
。只需在表单元素中使用type="submit"
的输入,就可以了。按下表单中的提交按钮将触发ng-submit
。
<form role="form" ng-submit="vm.submitForm()">
<div class="form-group">
<label for="fullName">Name</label>
<input type="text"
id="fullName"
name="fullName"
class="form-control"
ng-model="vm.employee.fullName" />
</div>
<div class="col-sm-offset-3 col-sm-9">
<input type="submit"
class="btn btn-primary" value="Submit" />
</div>
</form>
确保您的提交功能是基于控制器或基于范围的功能,以便能够通过视图调用:
var QuestionEditController = function ($location, questionService, $env) {
var vm = this
vm.employee = {};
vm.submitForm = function () {
console.log('employee', employee);
};
};
答案 1 :(得分:1)
制作您的功能范围,以便从表单访问。
删除ng-click
,因为您使用的是ng-submit
,如@lin提到的
$scope.submitForm = function () {
console.log('employee', employee);
};
更新了
如果你没有在控制器中使用范围,那么将this
分配给变量并使用控制器,如html
ng-controller="ctrl as vm"
演示
var QuestionEditController = function ($scope) {
var vm = this
vm.employee = {};
console.log('pre employee', vm.employee); // this works
vm.submitForm = function () {
console.log('employee', vm.employee);
};
}
angular.module("app",[])
.controller("ctrl",QuestionEditController)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as vm">
<form role="form" ng-submit="vm.submitForm()">
<div class="form-group">
<label for="fullName">Name</label>
<input type="text" id="fullName" name="fullName" class="form-control" ng-model="vm.employee.fullName" />
</div>
<div class="col-sm-offset-3 col-sm-9">
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
</form>
</div>
答案 2 :(得分:1)
<html lang="en" ng-app="demo">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="angular.js"></script>
<script>
angular.module("demo",[])
.controller("cc",function($scope){
$scope.students =
["student1","student2","student3","student4","student5","student6","student7","student8"]
})
</script>
<body>
<div class="container"></div>
<div class="row">
<div class="col-md-4 "><strong> Batch 1</strong> </div>
<div class="col-md-4 col-md-offset-4 pull-right" > <strong> Venu 4</strong>
</div>
</div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading"><strong>Name</strong></div>
</div>
<!-- List group -->
<div ng-controller="cc">
<ul class="list-group" ng-repeat="student in students">
<li class="list-group-item">{{student}}</li>
</ul>
</div>
</body>
</html>
答案 3 :(得分:1)
无需处理ng-click事件即可提交表单。使用type =“submit”
<form role="form" ng-submit="vm.submitForm()">
<div class="form-group">
<label for="fullName">Name</label>
<input type="text"
id="fullName"
name="fullName"
class="form-control"
ng-model="vm.employee.fullName" />
</div>
<div class="col-sm-offset-3 col-sm-9">
<input type="submit"
class="btn btn-primary" value="Submit" />
</div>
</form>