0
我是angularJS以及MVC的新手。只是尝试了一个简单的CRUD操作。 GetallEmployee（）和编辑操作调用工作正常。但提交不起作用。我确信代码中有很多错误。提交按钮不适用于AngularJS
这是我的控制器和服务，并认为我说....
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>
你只是发布了整个代码。调试它，使用控制台，确切地说你在哪里看到问题。 –
我认为角是区分大小写的，将你的'ng-submit'更改为：'ng-submit =“myController.AddUpdateEmployee（）”' – devqon
@shubham ..我没有看到错误，没有警告..这就是为什么为了的便利添加了整个代码..但最终使它变得微不足道..下一次将明确无误.. @ devqon ...感谢它帮助 –