提交按钮不适用于AngularJS

Question

我是 angularJS 和 MVC 的新手。刚刚尝试了一个简单的 CRUD 操作。 GetallEmployee() 和编辑操作调用工作正常。但是提交不起作用。我确信代码中有很多错误。为此道歉。

这是我添加的控制器、服务和视图....

app.controller("myController", ['$scope', '$http', 'angularService', function ($scope, $http, angularService) {
    $scope.employees = [];
        var fetched = angularService.GetAllEmployee();
        fetched.then(function (emps) {
            $scope.employees = emps.data;
        });


    $scope.editEmployee = function (data) {
        var Emp = $http({
            method: "get",
            url: "Home/GetEmployeebyId",
            params: {
                Id: JSON.stringify(data.ID)
            }
        }).success(function (Emp) {
            $scope.employeeName = Emp.Name;
            $scope.employeeId = Emp.ID;
            $scope.employeeEmail = Emp.Email;
            $scope.employeeAge = Emp.Age;
            $scope.Action = "Update";
            $scope.IsIndian = Boolean(Emp.IsIndian);
            $scope.employeeGender = Emp.Gender;
        });


    };

    $scope.AddUpdateEmployee = function () {

        var Employee = {
            Id: $scope.employeeId,
            Name: $scope.employeeName,
            Email: $scope.employeeEmail,
            Age: $scope.employeeAge,
            Gender: $scope.employeeGender,
            IsIndian: $scope.IsIndian,
        };


        var getAction = $scope.Action;

        if (getAction == 'Update') {
            Employee.Id = $scope.employeeId;
            $http({ method: 'post', url: 'Home/UpdateEmployee', data: JSON.stringify(Employee), datatype: 'json' }).success
                (function (output) {
                    var fetched = angularService.GetAllEmployee();
                    fetched.then(function (emps)
                    {
                        $scope.employees = emps.data;
                    }
                       )
                    ClearFields();

                });

        }
        else {
            $http({ method: 'post', url: 'Home/AddEmployee', data: JSON.stringify(Employee), datatype: 'json' }).success
                (function () {
                    var fetched = angularService.GetAllEmployee();
                    fetched.then(function (emps) {
                        $scope.employees = emps.data;
                        alert(output);
                        ClearFields();

                    });


                }
                );


        }
        $scope.Action = "";
    }


    ////$scope.deleteEmployee = function (employee) {
    ////    angularService.deleteEmployee(employee.ID).then(function (msg) {
    ////        GetAllEmployee();
    ////        alert(msg.data);/////earlier it was a string message in place if msg.data
    ////    }, function () {
    ////        alert('Error in Deleting Record');
    ////    });
    ////}


    function ClearFields() {
        $scope.employeeId = "";
        $scope.employeeName = "";
        $scope.employeeEmail = "";
        $scope.employeeAge = "";
        $scope.IsIndian = false;
        $scope.Gender = 'Male';
    }
}]);

app.service("angularService", function ($http) {

    //get All Eployee
    var temp = this;
    temp.employee = [];
    this.GetAllEmployee = function () {
        return $http.get("Home/GetAll").success(function (emps) {
            emps.forEach(function (eachemp) {
                eachemp.IsIndian = Boolean(eachemp.IsIndian);

                temp.employee.push(eachemp);
                             })
        });
    }
});

@{
    ViewBag.Title = "Home Page";
}
<div ng-controller="myController as myController" ng-app="MyApp">
    <br />
    <div>
        <table class="table ">
            <tr>
                <td colspan="6" align="center">
                    <label style="font-family:Arial ;font-weight:bold">Employee Details</label>
                </td>

            </tr>

            <tr>
                <td style="font-weight:bold">Name</td>
                <td style="font-weight:bold">Id</td>
                <td style="font-weight:bold">Email</td>
                <td style="font-weight:bold">Age</td>
                <td style="font-weight:bold"></td>

            </tr>
            <tr ng-repeat="emp in employees">
                <td>{{emp.Name}}</td>
                <td>{{emp.ID}}</td>
                <td>{{emp.Email}}</td>
                <td>{{emp.Age}}</td>
                <td>
                    <button ng-click="editEmployee(emp)" type="submit" class="btn btn-primary">Edit</button>
                    <button ng-click="deleteEmployee(emp)" type="submit" class="btn btn-primary">Delete</button>
                </td>
                <td>
                    <input type="checkbox" ng-model="emp.IsIndian" disabled="disabled" name="IndianChk" /> Indian
                    <input type="radio" disabled="disabled" ng-model="emp.Gender" value="Male"> Male
                    <input type="radio" disabled="disabled" ng-model="emp.Gender" value="Female" />Female
                </td>
            </tr>

        </table>
    </div>

    <form name="form" ng-submit="myController.addupdateemployee()">
        <table class="table table-responsive">
            <tr>
                <td>
                    <label>Employee ID </label>
                </td>
                <td>
                    <input type="text" disabled="disabled" ng-model="employeeId" class="form-control" />
                </td>

            </tr>
            <tr>
                <td>
                    <label>Employee Name </label>
                </td>
                <td>

                    <div class="form-group" ng-class="{'has-error': form.empname.$invalid && form.empname.$dirty }">
                        <input type="text" ng-model="employeeName" class="form-control" required name="empname" />
                    </div>
                </td>

            </tr>
            <tr>
                <td>
                    <label>Employee Email </label>
                </td>
                <td>
                    <div class="form-group" ng-class="{'has-error': form.mail.$invalid && form.mail.$dirty }">
                        <input type="text" ng-model="employeeEmail" class="form-control" required name="mail" />

                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Gender</label>
                </td>
                <td>
                    <div>
                        <select class="form-control" ng-model="employeeGender" required>
                            <option>Male</option>
                            <option>Female</option>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Employee Age </label>
                </td>
                <td>
                    <div class="form-group">
                        <input type="number" ng-model="employeeAge" required class="form-control" name="age">

                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <label>Is Indian </label>  <input type="checkbox" ng-model="IsIndian" ng-required="true" />


                </td>

            </tr>
            <tr>
                <td colspan="2">
                    <button type="submit"  class="btn btn-primary" name="submit">submit</button>
                </td>
            </tr>


        </table>
    </form>
</div>

Answer 1

从以下位置更改您的表单标签：

<form name="form" ng-submit="myController.addupdateemployee()">

到

<form ng-submit="AddUpdateEmployee()" ng-controller="myController">