angluar js学生管理系统练习题
效果图：
-----------------------------------------------script代码------------------------------------------------------------
<script src="js/angularjs-1.55/angular.js"></script>
<script>
var app=angular.module("xxjapp",[]);
app.controller("ctrl",function($scope,$http){
$http.get("date/datas.json").success(function(aa){
$scope.message=aa; //把datas.json中的数据绑定到纽带的message
})
//删除
$scope.del=function(i){
$scope.message.splice(i,1);
}
//修改
$scope.update=function(s){
var password2=prompt("修改的密码",s.Password);
s.password=password2;
}
//全选和反选的操作
$scope.ckall=function(){
//遍历数组，让数组进行全选或者全不选
for(var i=0;i<$scope.message.length;i++){
$scope.message[i].ck=$scope.flagck;
}
}
//删除全部
$scope.clear=function(){
$scope.message=[]; //清空数组，给数组重新复制为空数组
}
//批量删除
$scope.delall=function(){
for(var i=0;i<$scope.message.length;i++){
if( $scope.message[i].ck){
$scope.message.splice(i,1);
i--; //保证此数组不会隔行删除
}
}
}
//定义检查改行年龄是否合法
$scope.filterAge=function(stu){
//获取下拉列表框选择年龄
var selecte_age= $scope.cxage;
console.log("年龄值：",stu.age+"---"+selecte_age);
if(selecte_age==undefined||selecte_age==""){
return true;
}else {
var int_age= parseInt(selecte_age);
if(stu.age>int_age&&stu.age<=(int_age+10)){
return true;
}
}
return false;
}
})
</script>
</head>
--------------------------------------------------------html代码--------------------------------------------------------
<body ng-app="xxjapp" ng-controller="ctrl">
姓名查找：<input type="text" ng-model="cxsname"/>
年龄查找：<select ng-model="cxage">
<option value="">请选择</option>
<option value="10">10-20</option>
<option value="20">20-30</option>
<option value="30">30-40</option>
</select>
性别查找：<select ng-model="cxsex">
<option value="">请选择</option>
<option>男</option>
<option>女</option>
</select>
<button>查询</button>
<button ng-click="clear()">删除全部</button>
<button ng-click="delall()">批量删除</button>
<table border="1px" width="800px"> <!-- ng-show="false" 如果值为false那么ng-show所在的标签内容全部隐藏 -->
<tr align="center">
<td><input type="checkbox" ng-click="ckall()" ng-model="flagck" /></td>
<td>序号</td>
<td>姓名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr ng-repeat="s in message|filter:{sname:cxsname,sex:cxsex}" ng-show="filterAge(s)" align="center"> <!--filter筛选数组（查询）：过滤器 -->
<td><input type="checkbox" ng-model="s.ck" /></td>
<td>{{$index+1}}</td> <!--1 $index：数组的索引值 -->
<td>{{s.sname}}</td>
<td>{{s.password}}</td>
<td>{{s.age}}</td>
<td>{{s.sex}}</td>
<td><button ng-click="update(s)">修改</button>
<button ng-click="del($index)">删除</button>
</td>
</tr>
</table>
</body>