Angular表单未提交角表
[英]Angular form not getting submitted with ng-submit
问题描述
I am new to AngularJS. 
我是AngularJS的新手。 Just started my first demo project. 刚开始我的第一个演示项目。 The form is not getting submitted through the index.html. 表单没有通过index.html提交。 However if I try with the Template Html it submits the form. 但是，如果我尝试使用模板HTML，则会提交表单。 I have also tried with ng-click with submit button. 我也尝试了ng-click with Submit按钮。 Still it doesn't work. 仍然不起作用。 What am I missing here? 我在这里想念什么？
index.html index.html
<html ng-app="angularFormsApp"> <head> <title></title> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <script src="Scripts/angular.min.js"></script> <script src="app/AngularFormsApp.js"></script> <script src="app/EmployeeForm/efController.js"></script> <script src="app/EmployeeForm/efDirective.js"></script> <script src="app/EmployeeForm/efService.js"></script> </head> <body ng-controller="efController" class="container"> <employee-form/> </body> </html>
AngularFormsApp.js AngularFormsApp.js
var angularFormsApp = angular.module('angularFormsApp', []);
efController.js efController.js
angularFormsApp.controller('efController', function efController($scope, efService) { $scope.employee = efService.employee; $scope.departments = [ "Engineering", "Marketing", "Finance", "Administration"]; $scope.submitForm = function () { } });
efDirective.js efDirective.js
angularFormsApp.directive('employeeForm', function() { return { restrict: 'E', templateUrl: 'app/EmployeeForm/efTemplate.html' } });
efService.js efService.js
angularFormsApp.factory('efService', function() { return { employee: { fullName: "Wilton Adams", notes: "The ideal employee. Just don't touch his red stapler.", department: "Administration", perkCar: true, perkStock: false, perkSixWeeks: true, payrollType: "none" } } } );
efTemplate.html efTemplate.html
<form class="form-horizontal" role="form" ng-submit="submitForm()"> <fieldset> <legend>Basic Information</legend> <div class="form-group"> <label for="fullName" class="col-sm-3 control-label">Name</label> <div class="col-sm-9"> <input type="text" id="fullName" name="fullName" class="form-control" ng-model="employee.fullName" /> </div> </div> <div class="form-group"> <label for="notes" class="col-sm-3 control-label">Notes</label> <div class="col-sm-9"> <textarea name="notes" id="notes" class="form-control" rows="5" cols="40" ng-model="employee.notes"></textarea> </div> </div> <div class="form-group"> <label for="department" class="col-sm-3 control-label">Department</label> <div class="col-sm-9"> <select name="department" id="department" class="form-control" ng-model="employee.department" ng-options="dept for dept in departments"></select> </div> </div> </fieldset> <br /> <fieldset> <legend>Perks</legend> <div class="form-group"> <div class="col-sm-3"></div> <div class="col-sm-9"> <div class="checkbox"> <label> <input type="checkbox" value="perkCar" ng-model="employee.perkCar" />Company Car </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="perkStock" ng-model="employee.perkStock" />Stock Options </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="perkSixWeeks" ng-model="employee.perkSixWeeks" />Six Weeks Vacation </label> </div> </div> </div> </fieldset> <br /> <fieldset> <legend>Payroll Type</legend> <div class="form-group"> <div class="col-sm-3"></div> <div class="col-sm-9"> <div class="radio"> <label> <input type="radio" name="payrollType" value="w2" ng-model="employee.payrollType" />W-2 </label> </div> <div class="radio"> <label> <input type="radio" name="payrollType" value="ten99" ng-model="employee.payrollType" />1099 </label> </div> <div class="radio"> <label> <input type="radio" name="payrollType" value="none" ng-model="employee.payrollType" />None </label> </div> <br /> </div> </div> </fieldset> <div class="col-sm-offset-3 col-sm-9"> <input type="submit" class="btn btn-primary" value="Submit" /> </div> </form>
2 个解决方案
解决方案1
0 2015-05-14 05:31:38
you should load efService.js before loading efController.js 您应该在加载efController.js之前加载efService.js
<script src="app/AngularFormsApp.js"></script>
<script src="app/EmployeeForm/efService.js"></script>
<script src="app/EmployeeForm/efController.js"></script>
解决方案2
0 已采纳 2015-05-25 01:22:40
Its working now. 现在正在工作。 Being the first app, i was trying to debug with toggle point. 作为第一个应用程序，我正在尝试使用触发点进行调试。 When I inserted an alert inside the submitForm() it showed the alert.It works with both the ng-click and ng-submit. 当我在SubmitForm（）中插入一个警报时，它会显示警报。它可以与ng-click和ng-submit一起使用。 Sometimes I can be too silly :D 有时候我可能太傻了：D
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.