Question

我是AngularJS的新手。刚开始我的第一个演示项目。表单未通过index.html提交。但是，如果我尝试使用Template Html，则会提交表单。我也尝试过使用提交按钮进行ng-click。它仍然无法奏效。我在这里缺少什么？

的index.html

＆＃13;

<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>

＆＃13;

AngularFormsApp.js

＆＃13;

var angularFormsApp = angular.module('angularFormsApp', []);

＆＃13;

efController.js

＆＃13;

angularFormsApp.controller('efController',

    function efController($scope, efService) {

        $scope.employee = efService.employee;

        $scope.departments = [
            "Engineering",
            "Marketing",
            "Finance",
            "Administration"];

        $scope.submitForm = function () {

        }
    });

＆＃13;

efDirective.js

＆＃13;

angularFormsApp.directive('employeeForm',
  function() {
    return {
      restrict: 'E',
      templateUrl: 'app/EmployeeForm/efTemplate.html'
    }
  });

＆＃13;

efService.js

＆＃13;

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"

      }
    }
  }
);

＆＃13;

efTemplate.html

＆＃13;

<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>

＆＃13;

Answer 1

你应该在加载efController.js之前加载efService.js

 table.mystyles
 {
     //your styles
 }
 table.mystyles td
 {
     //your styles
 }

Answer 2

现在正在工作。作为第一个应用程序，我试图用切换点进行调试。当我在submitForm（）中插入警报时，它显示了警报。它与ng-click和ng-submit一起使用。有时我可能太傻了：D

Angular表单未通过ng-submit提交

2 个答案: