Angularjs学生信息管理
2017-10-25 09:37
218 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <script type="text/javascript" src="js/angular.js" ></script> <script> var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.users = [ {id:1,name:"Tom",pwd:"111",age:12,sex:"男",state:false}, {id:2,name:"Jenny",pwd:"121",age:22,sex:"男",state:false}, {id:3,name:"Marry",pwd:"131",age:32,sex:"男",state:false}, {id:4,name:"Danny",pwd:"141",age:42,sex:"女",state:false}, {id:5,name:"John",pwd:"151",age:52,sex:"女",state:false}]; $scope.title = "name"; $scope.desc = 0; $scope.key = ''; $scope.ageSize = ""; $scope.setSex = ""; //排序 $scope.myorderBy = function(name){ $scope.title = name; $scope.desc = !$scope.desc; } //删除 $scope.delall = function(){ $scope.users.splice($scope.users); } //年龄范围查询 $scope.ageTest = function(age,ageSize){ if (ageSize != "--年龄范围查询--") { var ages = ageSize.split("~"); var ageMin = ages[0]; var ageMax = ages[1]; if (age < ageMin || age > ageMax) { return false; } else{ return true; } } else{ return true; } } //批量删除 $scope.deleteSel = function(){ var userNames = []; //遍历users数组,获取状态是选中的user对象的名字 for (index in $scope.users) { if ($scope.users[index].state == true) { userNames.push($scope.users[index].name); } } if (userNames.length > 0) { if(confirm("是否删除选中项?")) { for (i in userNames) { var name = userNames[i]; for (i2 in $scope.users) { if ($scope.users[i2].name == name) { $scope.users.splice(i2,1); } } } } } else{ alert("请选择删除项"); } } //全选 反选 $scope.selectAll = false; $scope.all = function(m){ for (var i = 0; i < $scope.users.length; i++) { if (m == true) { $scope.users[i].state = true; }else{ $scope.users[i].state = false; } } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <table border="1" style="text-align: center;" width="600" cellpadding="5" cellspacing="0"> <caption>学生信息管理</caption> <tr> <th colspan="3"> <input type="text" ng-model="key" placeholder="请输入姓名关键字" /> </th> <th> <select ng-model="ageSize" ng-init="ageSize='--年龄范围查询--'"> <option>--年龄范围查询--</option> <option>10~20</option> <option>21~30</option> <option>31~100</option> </select> </th> <th> <select ng-model="setSex"> <option value="">--性别--</option> <option>男</option> <option>女</option> </select> </th> <th> <input type="button" value="全部删除" ng-click="delall()"/> <input type="button" value="批量删除" ng-click="deleteSel()"/> </th> </tr> <tr> <th><input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)"/></th> <th ng-click="myorderBy('id')">id</th> <th ng-click="myorderBy('name')">用户名</th> <th ng-click="myorderBy('pwd')">密码</th> <th ng-click="myorderBy('age')">年龄</th> <th ng-click="myorderBy('sex')">性别</th> </tr> <tr ng-repeat="user in users | filter:setSex |filter: {name: key}| orderBy : title : desc" ng-if="ageTest(user.age,ageSize)"> <td><input type="checkbox" ng-model="user.state" ng-checked="selectAll"/></td> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.pwd}}</td> <td>{{user.age}}</td> <td>{{user.sex}}</td> </tr> </table> </center> </body> </html>
相关文章推荐
- 建立学生信息管理数据库
- 学生信息管理系统C语言版
- 学生信息管理系统简易版(结构体)
- 学生信息管理系统(VB 干货篇)
- 学生信息管理系统的Bug
- 学生信息管理系统
- Java学生信息管理系统设计(数据库版)
- ASP.NET学生信息管理系统-教务管理-学生信息管理(二)
- ASP.NET学生信息管理系统-权限管理-用户分组
- 学生信息管理系统
- 完成一个学生管理程序,使用学号作为键添加5个学生对象,并可以将全部信息保存在文件中,可以实现对学生信息的学号查找,输出全部学生信息的功能。
- 学生信息管理系统收宫篇
- 学生信息管理系统之【修改信息窗口】
- 学生信息管理系统优化
- c语言学生信息管理系统(链表、文件)
- 【mfc】学生信息管理,实现List控件节点的增删改查
- AngularJs 商品订单信息管理
- 学生信息管理系统
- hibernate+struts2学生信息管理系统简单整合