代码实现angular和路由页面跳转/姓名筛选/年龄区间查找/单/批量删除教程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.leftSide{
width: 20%;
display: inline-block;
background-color: red;
height: 600px;
float: left
}
.rightSide{
width: 80%;
display: inline-block;
background-color:#b2d235;
height: 600px;
float: right
}
li {
list-style-type: none;
font-size: 30px;
padding: 37px 0px 37px 100px;
border: 1px solid blue;
margin-left: -40px;
}
li a {
text-decoration: none;
}
</style>
<!-- 1.导入库文件 -->
<script type="text/javascript" src="angular.js" ></script>
<script type="text/javascript" src="angular-route.js" ></script>
<script>
/*2.注入路由服务*/
var app = angular.module("myApp",['ngRoute']);
//3.配置路由规则
app.config(["$routeProvider",function($routeProvider){
//使用路由服务对象，配置路由规则
$routeProvider
.when("/login",{
controller:"loginCtrl",
templateUrl:"login.html"
})
.when("/main",{
controller:"mainCtrl",
templateUrl:"main.html"
})
.when("/game",{
controller:"gameCtrl",
templateUrl:"game.html"
})
.when("/mine",{
controller:"mineCtrl",
templateUrl:"mine.html"
})
.when("/setting",{
controller:"settingCtrl",
templateUrl:"setting.html"
})
.otherwise({redirectTo:"/login"});
}]);
//主控制器
app.controller("myCtrl",function($scope){
});
//注册页面控制器
app.controller("loginCtrl",function($scope){
$scope.name = "";
$scope.login = function(id,name,pwd,age,sex){
if($scope.name == null || $scope.name == ""){
alert("用户名不能为空");
}else {
}
}
});
//主页面控制器
app.controller("mainCtrl",function($scope){
$scope.users = [{
id:1,
name:"张三",
pwd:"111",
age:22,
sex:"男",
state:false
},{
id:2,
name:"李四",
pwd:"222",
age:22,
sex:"男",
state:false
},{
id:3,
name:"王五",
pwd:"333",
age:44,
sex:"男",
state:false
},{
id:4,
name:"赵六",
pwd:"444",
age:55,
sex:"男",
state:false
}];
//批量删除
$scope.deleteSel = function(){
for(var i=0;i<$scope.users.length;i++){
if($scope.users[i].state==true){
$scope.users.splice(i,1);
i--;
}
}
}
//如果选项全部现在 全选按键自动为true
$scope.checkSelect = function () {
var flag = 0;
for(var i = 0; i<$scope.users.length; i++){
if($scope.users[i].state == true){
flag ++;
}
}
if(flag == $scope.users.length){
$scope.selectAll = true;
}else{
$scope.selectAll = false;
}
};
//全选方法
$scope.selectAll=false;
$scope.selectAllFun= function () {
for(var i=0;i<$scope.users.length;i++){
if($scope.selectAll===true){
$scope.users[i].state=true;
}else {
$scope.users[i].state=false;
}
}
};
//单个删除
$scope.sc = function ($index) {
$scope.users.splice($index,1)
}
//判断年龄范围
$scope.size = "--请选择--";
$scope.ageSize = function(age,size){
if(size == "--请选择--"){
return true;
}else{
var arr = size.split("-");
var ageMin = arr[0];
var ageMax = arr[1];
if(age>ageMin && age<ageMax){
return true;
}else{
return false;
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p class="leftSide">
<ul>
<li><a href="#/login">登录</a></li>
<li><a href="#/main">首页</a></li>
<li><a href="#/game">游戏</a></li>
<li><a href="#/mine">我的</a></li>
<li><a href="#/setting">设置</a></li>
</ul>
</p>
<p class="rightSide" ng-view>
</p>
</body>
</html>
首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<h3>主页面</h3>
<p>
姓名：<input type="text" placeholder="用户名" size="8" ng-model="gen"/>
年龄：<select ng-model="size">
<option>--请选择--</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
<option>51-60</option>
</select>
<button ng-click="deleteSel()">批量删除</button><br/><br/>
</p>
<table border="1 solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
<th>id</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter:{name:gen}" ng-if="ageSize(user.age,size)">
<td><input type="checkbox" ng-click="checkSelect($index)" ng-model="user.state"/></td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.pwd}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td><button ng-click="sc($index)">删除</button></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
登录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script></script>
<script>
</script>
</head>
<body>
<center>
<h3>注册页面</h3>
<table border="1 solid blue" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<th>i d：</th>
<td><input ng-model="id" type="text" placeholder="请输入用户名"/> </td>
</tr>
<tr>
<th>姓 名：</th>
<td><input ng-model="name" type="text" placeholder="请输入用户名"/> </td>
</tr>
<tr>
<th>密 码：</th>
<td><input type="text" ng-model="pwd" placeholder="请输入密码"/> </td>
</tr>
<tr>
<th>年 龄：</th>
<td><input type="text" ng-model="age" placeholder="请输入年龄"/> </td>
</tr>
<tr>
<th>性 别：</th>
<td><input type="text" ng-model="sex" placeholder="请输入性别"/> </td>
</tr>
<tr align="center">
<td colspan="2"><input ng-click="login(id,name,pwd,age,sex)" type="button" value="注册"/></td>
</tr>
</table>
</center>
</body>
</html>
