Angularjs学生信息管理
来源:互联网 发布:软件使用说明书怎么写 编辑:程序博客网 时间:2024/06/06 14:03
<!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>
阅读全文
0 0
- Angularjs学生信息管理
- 学生信息管理
- 学生信息管理
- 学生信息管理
- 学生信息管理
- 学生信息管理
- 学生信息管理
- 学生信息管理
- AngularJs 商品订单信息管理
- 学生信息管理系统
- 学生学籍信息管理系统
- 学生信息管理系统
- 学生信息管理系统
- 学生信息管理前台代码
- 学生成绩信息管理系统
- 学生信息管理系统
- 【学生信息管理系统 总结】
- 学生信息管理系统--毕业论文
- 【笔记】动态规划w
- HTTPS流量激增,2/3Google用户访问的网页启用加密
- 抽象接口和抽象类
- 购物车
- tomcat 调试模式 启动
- Angularjs学生信息管理
- CPU密集型和IO密集型的理解
- 简单的实现WaveSwipeRefreshLayout的下拉刷新(嵌套RecyclerView)
- Tomcat基础
- 单例模式实现方法
- iOS pod~Podfile文件中常用第三方
- 一个感染型的病毒逆向分析
- 邻接表实现--图的深度优先遍历DFS和广度优先遍历BFS
- 第三方支付对接流程