2017-01-24 5 views
1

Я новичок в программировании на угловом уровне. Если кто-то может помочь найти ошибку.Форма не отправляется в Угловой

ФОРМА AddEmployee (HTML)

<div ng-controller="EmployeeController"> 
<form novalidate> 
    Name: <input type="text" ng-model="Employee.EmployeeName" /><br /> 
    Salary:<input type="text" ng-model="Employee.Salary" /><br /> 
    <select ng-model="Employee.DepartmentId"> 
    <option value="`enter code here`">--Select --</option> 
    <option ng-repeat="d in Department" ng-selected="selectedItemvalue == d.DepartmentId" value="{{d.DepartmentId}}">{{d.DepartmentName}}</option> 
</select> 
    <button type="submit" ng-click="SaveData(Employee)">Submit</button> 

    </form> 

Сотрудник регулятора,

var MyApp = angular.module("MyApp",[]) 
       .controller("EmployeeController", function ($scope, $http) { 
        $scope.Employee = { 
         EmployeeName: '', 
         Salary: '', 
         DepartmentId:'' 
        }; 
        $scope.SaveData = function (data) { 
         $http({ 
          url: 'PostEmployee', 
          method: 'POST', 
          data: JSON.stringify(data), 
          headers: {'content-type':'application/json'} 
         }).success(function (response) { 
          alert('Success'); 
         }).error(function (error) { 
          alert('Error'); 
         }) 
        } 

        $http.get('GetDepartments').then(function (response) { 
         $scope.Department = response.data; 
        }); 
       }); 

Когда я нажимаю на представить метод SaveData, вероятно, не называется. Plase помощь

UPDATE: = «MyApp» добавляется в качестве параметра в тело тега на странице макета и все необходимые скрипты тоже

нг-приложение. Более того, выпадающий список заполняется правильно.

<body ng-app="MyApp"> 
@RenderBody() 

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/angular") 
@RenderSection("scripts", required: false) 
</body> 

UPDATE 2: Это как источник выглядит в браузере.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width" /> 
    <title>AddEmployee</title> 
<link href="/Content/site.css" rel="stylesheet"/> 

<script src="/Scripts/modernizr-2.5.3.js"></script> 

</head> 
<body ng-app="MyApp"> 

<div ng-controller="EmployeeController"> 
<form novalidate name="F1"> 
    Name: <input type="text" ng-model="Employee.EmployeeName" /><br /> 
    Salary:<input type="text" ng-model="Employee.Salary" /><br /> 
    <select ng-model="Employee.DepartmentId"> 
    <option value="">--Select --</option> 
    <option ng-repeat="d in Department" ng-selected="selectedItemvalue == d.DepartmentId" value="{{d.DepartmentId}}">{{d.DepartmentName}}</option> 
</select> 
    <button type="submit" ng-click="SaveData(Employee)">Submit</button> 

    </form> 

</div> 


<script src="/Scripts/jquery-1.7.1.js"></script> 

<script src="/Scripts/angular.js"></script> 


<script src="/Scripts/EmployeeController.js"></script> 

ответ

1
  • ли вы назвать ваш controller.js на вашей странице layout?
  • Вы проверили, что ваш контроллер инициализирован?
  • Пожалуйста, определите $scope.Employee ={} глобально в вашем контроллере.
+0

<форма> NOVALIDATE ..... <входной тип = "кнопка" нг-клик = "SaveData (Employee)" value = "Отправить" /> ' Не работает. Нет ошибки на консоли –

+0

Это не так, форма должна быть отправлена ​​на кнопку типа submit, а также ng-submit должно работать. – Jenny

+0

Да, я знаю. Я просто предлагаю только дополнительный способ. –

0

Вы должны указать модуль AngularJS (в вашем случае MyApp), который будет использоваться в качестве корневого модуля для приложения.

+0

Это уже сделано в макете страница –

+0

Просто F12 и см. журнал консоли. –

+0

Ошибка на консоли –

0

Используйте директиву ng-app для инициализации углового приложения. ng-app="MyApp" в вашем примере.

0

Вы должны Метиона имя приложения

решение

<div ng-app="myApp"> 
    <div ng-controller="ExampleController"> 
     <form novalidate class="simple-form"> 
     <label>Name: <input type="text" ng-model="user.name" /></label><br /> 
     <label>E-mail: <input type="email" ng-model="user.email" /></label><br /> 
     Best Editor: <label><input type="radio" ng-model="user.preference" value="vi" />vi</label> 
     <label><input type="radio" ng-model="user.preference" value="emacs" />emacs</label><br /> 
     <input type="button" ng-click="reset()" value="Reset" /> 
     <input type="submit" ng-click="update(user)" value="Save" /> 
     </form> 
     <pre>user = {{user | json}}</pre> 
     <pre>master = {{master | json}}</pre> 
    </div> 
    </div> 

<script> 
    angular.module('myApp', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
     $scope.master = {}; 

     $scope.update = function(user) { 
     $scope.master = angular.copy(user); 
     }; 

     $scope.reset = function() { 
     $scope.user = angular.copy($scope.master); 
     }; 

     $scope.reset(); 
    }]); 
</script> 

https://docs.angularjs.org/guide/forms См этот

Смежные вопросы