javascript - Angular form not getting submitted with ng-submit -
i new angularjs. started first demo project. form not getting submitted through index.html. if try template html submits form. have tried ng-click submit button. still doesn't work. missing here?
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
var angularformsapp = angular.module('angularformsapp', []);
efcontroller.js
angularformsapp.controller('efcontroller', function efcontroller($scope, efservice) { $scope.employee = efservice.employee; $scope.departments = [ "engineering", "marketing", "finance", "administration"]; $scope.submitform = function () { } });
efdirective.js
angularformsapp.directive('employeeform', function() { return { restrict: 'e', templateurl: 'app/employeeform/eftemplate.html' } });
efservice.js
angularformsapp.factory('efservice', function() { return { employee: { fullname: "wilton adams", notes: "the ideal employee. don't touch red stapler.", department: "administration", perkcar: true, perkstock: false, perksixweeks: true, payrolltype: "none" } } } );
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 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>
you should load efservice.js before loading efcontroller.js
<script src="app/angularformsapp.js"></script> <script src="app/employeeform/efservice.js"></script> <script src="app/employeeform/efcontroller.js"></script>
Comments
Post a Comment