//使用config配置路由规则
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/",{
template:""
})
.when("/addUser",{
controller:"addUserCtrl",
templateUrl:"addUser.html"
})
.when("/updatePwd",{
controller:"updatePwdCtrl",
templateUrl:"updatePwd.html"
})
.otherwise({redirectTo:"/addUser"});
}]);
//控制器
app.controller("myCtrl", function($scope,$location) {
//初始化数据
$scope.person = [{
id: 1,
name: "wg",
pswd: 111,
age: 20,
sex: "男"
}, {
id: 2,
name: "zs",
pswd: 111,
age: 20,
sex: "男"
}, {
id: 3,
name: "hha",
pswd: 111,
age: 19,
sex: "男"
}];
//全部删除功能代码
$scope.removeAll=function(index){
if(confirm("确定全部删除吗？")){
$scope.person.splice(index);
}
};
//删除单条信息
$scope.remove=function(index){
if(confirm("确定删除吗？")){
$scope.person.splice(index,1);
}
}
//定义页面跳转方法
$scope.goToUrl = function(path){
$location.path(path);
}
});
//定义添加用户控制器 app.controller("addUserCtrl",function($scope){
$scope.addStudent = function() { //添加学生函数
$scope.person.push({
name: $scope.newName,
age: $scope.newAge,
id: $scope.person.length + 1,
pswd: $scope.newPwd,
sex: $scope.newSex
});
$scope.newName = '';
$scope.newId = '';
$scope.newPwd = '';
$scope.newSex = '';
};
});
//定义修改用户控制器 app.controller("updatePwdCtrl",function($scope,$routeParams){
alert("修改控制器");
$scope.name = $routeParams.name;
alert($scope.name);
});
//body里面的内容
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<table border="1" cellspacing="0">
<tr>
<td colspan="2"><input type="text" placeholder="用户名查询" ng-model="name"/></td>
<td><input type="text" placeholder="年龄范围查询" ng-model="age"/></td>
<td colspan="2">
<select ng-model="sex">
<option>男</option>
<option>女</option>
</select>
</td>
<td colspan="2"><button ng-click="removeAll($index)">全部删除</button></td>
</tr>
<tr>
<td>id</td>
<td>用户名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>修改密码</td>
<td>删除</td>
</tr>
//循环遍历数组中的数据，使用到过滤器，实现模糊查询
<tr ng-repeat="a in person| filter:{'name':name} | filter:{'age':age}| filter:{'sex':sex}">
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>{{a.pswd}}</td>
<td>{{a.age}}</td>
<td>{{a.sex}}</td>
//点击此按钮，触发方法，然后使用路由，跳转到设置好的页面
<td><button ng-click="goToUrl('/updatePwd')">修改密码</button></td>
<td><button ng-click="remove($index)">删除</button></td>
</tr>
</table>
<button ng-click="goToUrl('/addUser')">添加用户</button>
<script type="text/ng-template" id="addUser.html">
<form action="#">
<table border="1" cellspacing="1" cellpadding="10">
<tr>
<th>用户名：</th>
<td><input placeholder="请输入用户名" ng-modle="Newname"/></td>
</tr>
<tr>
<th>密 码：</th>
<td><input placeholder="请输入密码" ng-modle="Newname"/></td>
</tr><tr>
<th>年 龄：</th>
<td><input placeholder="请输入年龄" ng-modle="Newname"/></td>
</tr><tr>
<th>性 别：</th>
<td><input placeholder="请输入性别" ng-modle="Newname" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="提交" ng-click="addStudent ()" /></td>
</tr>
</table>
</form>
</script>
<script type="text/ng-template" id="updatePwd.html">
<form>
<table border="1" cellspacing="1" cellpadding="10">
<tr>
<th>用户名：</th>
<td><input placeholder="请输入用户名" /></td>
</tr>
<tr>
<th>旧密码：</th>
<td><input placeholder="请输入旧密码" /></td>
</tr><tr>
<th>新密码：</th>
<td><input placeholder="请输入新密码" /></td>
</tr><tr>
<th>确 认：</th>
<td><input placeholder="确认新密码" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="提交" /></td>
</tr>
</table>
</form>
</script>
<div ng-view=""></div>
</center>
</body>
网友评论