您的位置：首页 > Web前端 > AngularJS

Angularjs+路由表格的增删改查综合

2017-10-21 13:03 260 查看 
login.html登录页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<script>

</script>
</head>
<body>
<center>
<h3>注册页面</h3>
<table border="1 solid blue" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<th>用户名：</th>
<td><input ng-model="name" type="text" placeholder="请输入用户名"/> </td>
</tr>
<tr>
<th>密　码：</th>
<td><input type="text" placeholder="请输入密码"/> </td>
</tr>
<tr>
<th>年　龄：</th>
<td><input type="text" placeholder="请输入年龄"/> </td>
</tr>
<tr>
<th>性　别：</th>
<td>男<input type="radio" value="name" id="name" /> 女<input type="radio" value="男" id="name2" /></td>
</tr>
<tr align="center">
<td colspan="2"><input ng-click="login()" type="button" value="注册"/></td>
</tr>
</table>
</center>
</body>
</html>

main.html   主页面表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<h3>主页面</h3>
<div>
姓名：<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/>
</div>
<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>删除</button></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

text3.html核心页面
<!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 src="angular.js"></script>
<script src="angular-route.js"></script>

<script>
/*2.注入路由服务*/
var app = angular.module("myApp",['ngRoute']);
//3.配置路由规
af02
则
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(){
if($scope.name == null || $scope.name == ""){
alert("用户名不能为空");
}
}
});
//主页面控制器
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(){
//定义空数组，保存选中项的name
var arr = [];
//遍历数据源，把选中项的名字添加到数组中。
for(index in $scope.users){
if($scope.users[index].state){
//$scope.users.splice(index,1);
arr.push($scope.users[index].name);
}
}
//遍历含有选中项name属性的数组。有多少个被选中，数据源就会被遍历多少遍。
if(arr.length>0){
for(i in arr){
//对比选中项的名字在数组中的角标，根据角标删除当前对象，删一个数据源少一个。
for(i2 in $scope.users){
if(arr[i] == $scope.users[i2].name){
$scope.users.splice(i2,1);
}
}
}
}else{
alert("请选择");
}
}

//全选方法
$scope.selectAll = false;
$scope.selectAllFun = function(){
if($scope.selectAll){
//alert("afsd");
for(index in $scope.users){
$scope.users[index].state = true;
}
}else{
for(index in $scope.users){
$scope.users[index].state = false;
}
}
}

//检测是否全选
$scope.checkSelect = function(index){
var temp = 0;
if($scope.users[index].state == true){
alert("asdf");
temp++;
}else{
temp--;
}
if(temp == $scope.users.length){
$scope.selectAll = true;
}else{
$scope.selectAll = false;
}

var haha = false;
for(i in $scope.users){
if($scope.users[i].state == true){

}else{
haha = true;
}
}
if(haha){
$scope.selectAll = false;
}else{
$scope.selectAll = true;
}
}

//判断年龄范围
$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">
<div 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>
</div>
<div class="rightSide" ng-view>

</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航