我是Angular的新手,我嘗試做一個簡單的練習單頁面應用程序,以後我可以使用它來開發。我使用: http://websystique.com/springmvc/spring-mvc-4-angularjs-example/ 作爲教程,但我嘗試使用「重置」和「添加」按鈕時出現問題。他們什麼都不做。他們甚至不提供任何控制檯錯誤。Spring Maven Angjular JS麻煩
下面是從JSP代碼:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="<c:url value='/static/app.js' />"></script>
<script src="<c:url value='/static/javascript/frontend.service/employees_service.js' />"></script>
<script src="<c:url value='/static/javascript/frontend.controller/employees_controller.js' />"></script>
<body ng-app="myApp">
<div ng-controller="EmployeesController">
<p>Register Form</p>
<form ng-submit="EmployeesController.submit()" name="myForm" id="myForm">
<input type="hidden" ng-model="EmployeesController.employee.id"/>
<br/>
First Name: <input type="text" ng-model="EmployeesController.employee.first_name" id="first_name" placeholder="First Name"/>
<br/>
LAST NAME: <input type="text" ng-model="EmployeesController.employee.last_name" id="last_name" placeholder="Last Name"/>
<br/>
EMAIL: <input type="email" ng-model="EmployeesController.employee.email" id="email" placeholder="E-mail adress"/>
<br/>
DEP ID:<input type="text" ng-model="EmployeesController.employee.dep_id" id="dep_id" placeholder="Department ID"/>
<br/>
SALARY: <input type="text" ng-model="EmployeesController.employee.salary" id="salary" placeholder="Salary"/>
<br/>
<input type="submit" value="{{!EmployeesController.user.id ? 'Add' : 'Update'}}"/>
<button type="button" ng-click="EmployeesController.reset()" ng-disabled="myForm.$pristine">Reset Form</button>
</form>
</div>
</body>
</html>
這裏是控制器:
/**
* employees_controller TODO
*/
App.controller('EmployeesController',
['$scope','EmployeesService', function($scope,EmployeesService){
this.employees = [];
this.employee={emp_id:null,first_name:'',last_name:'',email:'',dep_id:null,salary:''};
this.getAllEmployees = function(){
EmployeesService.getAllEmployees().then(
function(result){
this.employees = result;
},
function(error){
alert(error);
console.log('cant get em')
}
);
};
this.addEmployee = function(employee){
EmployeesService.addEmployee(employee).then(
this.getAllEmployees,
function(error){
console.log('error adding employee'+employee);}
);
};
this.editEmployee = function(employee,id){
EmployeesService.editEmployee(employee,id).then(
this.getAllEmployees,
function(error){
console.log('error editing employee with id '+id +' ' +employee);}
);
};
this.removeEmployee = function(id){
EmployeesService.removeEmployee(id).then(
this.getAllEmployees,
function(error){
console.log('error removing employee '+id)
}
);
};
this.getAllEmployees();
var self = this;
self.reset = function(){
console.log('reset form');
this.employee={emp_id:null,first_name:'',last_name:'',email:'',dep_id:'',salary:''};
$scope.myForm.$setPristine();
};
this.submit = function(){
console.log('in submit');
if(this.employee.id === null){
console.log('null id');
console.log('creating employee');
this.addEmployee(this.employee);
}else{
console.log('submit - nothing for now');
}
};
this.edit = function(id){
for(var i = 0;i<this.employees.length;i++){
if(this.employees[i].id === id){
this.employee = angular.copy(this.employees[i]);
break;
}
}
};
this.remove = function(id){};
}]);
我的問題是,復位和提交功能都完全忽略了對按鈕的點擊。在瀏覽器控制檯中,我無法收到任何消息或錯誤,同時遵循javascript控制檯。任何幫助?謝謝。
是的。那是爲我做的。萬分感謝! – dskfdskjgds