angularjs过滤、全选、删除

最新推荐文章于 2022-11-10 11:15:55 发布

葛村野人

最新推荐文章于 2022-11-10 11:15:55 发布

阅读量277

点赞数

<!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

收藏

觉得还不错? 一键收藏
0
评论
angularjs过滤、全选、删除

学生信息管理 var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.users = [ {id:1,name:"Tom",pwd:"111",age:12,sex:"男",state:false},
复制链接

扫一扫