Question

我是Angular Programming的新手。如果有人可以帮助找到错误。

AddEmployee FORM（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方法。请帮忙

更新：

纳克应用内=＆＃34; MyApp的＆＃34;作为参数添加到布局页面中的body标签和所有必需的脚本。此外，下拉列表会正确填充。

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

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

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

Answer 1

您是否在controller.js页面上致电layout了？
您是否检查过您的控制器已初始化？
请在控制器中全局定义$scope.Employee ={}。

Answer 2

您必须指定一个AngularJS模块（在您的案例中为MyApp）作为应用程序的根模块。

Answer 3

使用ng-app指令初始化角度应用。在你的例子中ng-app="MyApp"。

Answer 4

您必须提供应用名称

溶液

<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

表单不以Angular

4 个答案: