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

AngularJS实现增删改查数据/排序功能

2017-10-22 20:05 633 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>综合练习</title>
<style>
.addUser{
width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;
}
</style>
<script type="text/javascript" src="AngularJS/angular.js" ></script>
<script type="text/javascript" src="AngularJS/angular-route.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp",["ngRoute"]);
//定义路由规则
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/addUser",{//添加用路由地址
controller:"addCtrl",
templateUrl:"addUser.html"
})
.when("/updatePwd/:name",{//修改密码用路由地址
controller:"updateCtrl",
templateUrl:"updatePwd.html"
})
.otherwise({redirectTo:"/addUser"});
}]);
app.controller("myCtrl",function($scope,$location){
$scope.users = [
{"id":1,"name":"张三","pwd":"123","age":22,"sex":"男","state":false},
{"id":2,"name":"李四","pwd":"456","age":33,"sex":"女","state":false},
{"id":3,"name":"王五","pwd":"789","age":44,"sex":"男","state":false}
];
//给按钮添加点击事件，根据传过来的参数，判断跳转到的路由地址
$scope.goToPath = function(path){
alert(path);
$location.path(path);
}
//全部删除功能
$scope.deleteAll = function () {
alert("确认全部删除吗?");
$scope.users = [];
}

//全选功能
$scope.checkAll = false;
$scope.All = function () {
//当点击全选按钮时,实现全选
for(var i=0;i<$scope.users.length;i++){
if($scope.checkAll){
$scope.users[i].state = true;
}else{
$scope.users[i].state = false;
}
}
}
//全选功能的判断
$scope.Acheck = function () {
var flag = 0;
for(var i=0;i<$scope.users.length;i++){
if($scope.users[i].state){
flag++;
}
}
if(flag == $scope.users.length){
//实现全选按钮选中
$scope.checkAll = true;
}else{
$scope.checkAll = false;
}
}
//批量删除
$scope.piDelete = function () {
confirm("确定批量删除吗?");
for(var i=0;i<$scope.users.length;i++) {
if($scope.users[i].state){
$scope.users.splice(i,1);
i--;
}
}
}
//判断年龄范围
$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;
}
}
}
//判断年性别范围
$scope.sex1 = "--请选择--";
$scope.sexSize = function(sex,sex1){
if(sex1 == "--请选择--"){
return true;
}else{
if($scope.sex1 == sex){
return true;
}else{
return false;
}
}
}
});
//添加用户控制器
app.controller("addCtrl",function($scope){
$scope.name = "";//双向数据绑定，获得页面输入的新用户信息
$scope.pwd = "";
$scope.age = "";
$scope.sex = "";
$scope.sub = function(){
//遍历数据源，拿到最大的用户id
$scope.idMax = 0;
for(index in $scope.users){
if($scope.users[index].id > $scope.idMax){
$scope.idMax = $scope.users[index].id;
}
}
//创建新用户对象
var user = {
id:$scope.idMax+1,
name:$scope.name,
pwd:$scope.pwd,
age:$scope.age,
sex:$scope.sex
};
//把新获得的用户对象添加到数据库数组中
$scope.users.push(user);
}
});
//修改密码控制
app.controller("updateCtrl",function($scope,$routeParams){
var name = $routeParams.name;//获得要修改的用户的用户名
$scope.name = name;//将要修改用户的名字，赋值给双向数据绑定的页面用户名显示。
$scope.pwd1 = "";//双向数据绑定用户输入的新密码

//点击修改密码按钮，执行修改密码方法
$scope.updatePwd = function(){
//遍历数据源，通过比较数据源中用户名跟参数要修改的用户名一致，进行密码修改
for(index in $scope.users){
if($scope.users[index].name == name){
//获得用户输入的密码，赋值给当前用户要修改的新密码。
$scope.users[index].pwd = $scope.pwd1;
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>用户信息表</h3>
<div>
<input placeholder="用户名查询" size="10" ng-model="name"/> 
<!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" size="10"/>-->
年龄：<select id="age" 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> 
性别：<select ng-model="sex1">
<option>--请选择--</option>
<option>男</option>
<option>女</option>
</select> 
<input type="button" value="全部删除" ng-click="deleteAll()"/>
<input type="button" value="批量删除" ng-click="piDelete()"/>
</div><br />
<div>
<table border="1" cellspacing="1" cellpadding="10">
<thead>
<tr>
<th><input type="checkbox" ng-model="checkAll" ng-click="All()"/> </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:name}" ng-if="ageSize(user.age,size)" ng-show="sexSize(user.sex,sex1)">
<td><input ng-model="user.state" type="checkbox" ng-click="Acheck()"/></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="goToPath('/updatePwd/'+user.name)">修改密码</button> </td>
</tr>
</tbody>
</table>
</div><br />
<button class="addUser" ng-click="goToPath('/addUser')">添加用户</button><br /><br />

<!-- 1.添加用户页面 -->
<script type="text/ng-template" id="addUser.html">
<formaction="">
<tableborder="1"cellspacing="1"cellpadding="10">
<tr>
<th>用户名：</th>
<td><input ng-model="name" placeholder="请输入用户名" /></td>
</tr>
<tr>
<th>密　码：</th>
<td><input ng-model="pwd" placeholder="请输入密码" /></td>
</tr><tr>
<th>年　龄：</th>
<td><input ng-model="age" placeholder="请输入年龄" /></td>
</tr><tr>
<th>性　别：</th>
<td><input ng-model="sex" placeholder="请输入性别" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
</tr>
</table>
</form>
</script>
<!-- 2.修改用户信息页面 -->
<script type="text/ng-template" id="updatePwd.html">
<form>
<tableborder="1"cellspacing="1"cellpadding="10">
<tr>
<th>用户名：</th>
<td><input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td>
</tr>
<tr>
<th>旧密码：</th>
<td><input ng-model="oldPwd" placeholder="请输入密码" /></td>
</tr><tr>
<th>新密码：</th>
<td><input ng-model="pwd1" placeholder="请输入年龄" /></td>
</tr><tr>
<th>确　认：</th>
<td><input ng-model="pwd2" placeholder="请输入性别" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" value="提交" ng-click="updatePwd()" /></td>
</tr>
</table>
</form>
</script>

<!-- 6.指定相应内容 -->
<div ng-view>

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