1. 项目结构
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
//顺序不要变
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-ui-router.min.js"></script>
<script type="text/javascript" src="controller/StudentController.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<body>
<div ui-view="content">
</div>
</body>
</html>template
addStudent.html
<div>
<form>
姓名:<input type="text" ng-model="formData.name" >
年龄:<input type="number" ng-model="formData.age">
性别:<input type="radio" name="gender" ng-model="formData.gender" value="0">女
<input type="radio" name="gender" ng-model="formData.gender" value="1">男
<button ng-click="add()">添加</button>
</form>
</div>showStudent.html
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in datas">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
<td><a ng-click="delete(item.id)">删除</a></td>
<td><a ui-sref="Main.getStudent({id:item.id})">更新</a></td>
</tr>
</tbody>
</table>
</div>main.html
<div>
<a ui-sref="Main.addStudent">添加</a>
<a ui-sref="Main.queryStudent">查询</a>
</div>
<div ui-view="Main_content">
</div>UpdateStudent.html
<div>
<form>
姓名:<input type="text" ng-model="formData.name" >
年龄:<input type="number" ng-model="formData.age">
性别:<input type="radio" name="gender" ng-model="formData.gender" value="0">女
<input type="radio" name="gender" ng-model="formData.gender" value="1">男
<button ng-click="">保存</button>
</form>
</div>app.js
//千万不要忘了注册Controller
var m = angular.module('myApp',['ui.router','StudentController']);
m.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/Main/queryStudent");
$stateProvider.state("Main",{
url:'/Main',
views:{
"content":{
templateUrl:"templates/main.html"
}
}
}).state("Main.queryStudent",{
url:'/queryStudent',
views:{
"Main_content@Main":{
controller:'ShowStudentCNTR',
templateUrl:"templates/showStudent.html"
}
}
}).state("Main.addStudent",{
url:'addStudent',
views:{
"Main_content@Main":{
controller:'AddStudentCNTR',
templateUrl:"templates/addStudent.html"
}
}
}).state("Main.getStudent",{
url:'/getStudent/{id}',
views:{
"Main_content@Main":{
controller:'GetStudentCNTR',
templateUrl:'templates/UpdateStudent.html'
}
}
});
});
StudentController.js
//牛逼的双向数据绑定
var m = angular.module("StudentController",[]);
m.controller("GetStudentCNTR",function($scope,$stateParams){
var id = $stateParams.id;
alert(id);
});
m.controller("AddStudentCNTR",function($scope){
$scope.formData={
gender:0
}
$scope.add = function(){
alert($scope.formData.name)
alert($scope.formData.age);
alert($scope.formData.gender);
}
});
m.controller("ShowStudentCNTR",function($scope){
$scope.datas = [{id:1,name:'哈哈哈',age:18,gender:'男'},{id:2,name:'哈哈2',age:18,gender:'男'},{id:3,name:'哈哈3',age:18,gender:'男'},{id:4,name:'哈哈哈',age:18,gender:'男'},{id:1,name:'哈哈哈',age:18,gender:'男'},{id:1,name:'哈哈哈',age:18,gender:'男'},{id:1,name:'哈哈哈',age:18,gender:'男'},{id:1,name:'哈哈哈',age:18,gender:'男'}];
var pos = 0;
$scope.delete = function(id){
for(var i=0;i<$scope.datas.length;i++){
var ob = $scope.datas[i];
if(ob.id==id){
pos = i;
break;
}
}
$scope.datas.splice(pos, 1);
$state.go("Main");
}
});
1459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
