angular范围查询

最新推荐文章于 2023-05-08 17:50:44 发布

Cometsinthenightsky

最新推荐文章于 2023-05-08 17:50:44 发布

阅读量264

点赞数

本文链接：https://blog.csdn.net/qq_39443545/article/details/79077921

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/angular.min.js"></script>
		<script type="text/javascript">
			var app=angular.module("anan",[]);
			app.controller("enen",function($scope){
				$scope.user = [{
					ck:false,
					id: 1,
					name: '李1',
					pwd: 123456,
					age:18,
					sex:'女'
				}, {
					ck:false,
					id: 2,
					name: '李2',
					pwd: 123456,
					age:28,
					sex:'男'
				}, {
					ck:false,
					id: 3,
					name: '李3',
					pwd: 123456,
					age:38,
					sex:'男'
				}];
				$scope.insert = function() {
					$scope.checkSub=[];
					var cid=$scope.user.length+1;
					var cname=$scope.cunname;
					var cpwd=$scope.cunpwd;
					var cage=$scope.cunage;
					var csex=$scope.cunsex;
					if( cname== "" || cname== null) {
						$scope.checkSub.push("产品名称为空");
					}
					if( cpwd== "" || cpwd== null) {
						$scope.checkSub.push("产品名称为空");
					}
					console.log("------"+$scope.checkSub.length);
					if($scope.checkSub.length > 0) {
						$scope.cuo = true;
					} else {
						$scope.m=false;
						$scope.cuo = false;
						$scope.user.push({
							ck:false,
							id:cid,
							name:cname,
							pwd:cpwd,
							age:cage,
							sex:csex
						});
					}	
				}
				$scope.delso = function() {
					for(var i = 0; i < $scope.user.length; i++) {
						if($scope.user[i].ck) {
							$scope.user.splice(i, 1);
							i--;
						}
					}
				}
				$scope.delall = function() {
					for(var i = 0; i < $scope.user.length; i++) {
							$scope.user.splice(i, 1);
							i--;
					}
				}
				$scope.ckAll = function() {
					for(var i = 0; i < $scope.user.length; i++) {
						$scope.user[i].ck = $scope.flag;
					}
				}
				
				$scope.rp = "--请选择--";
				$scope.yue = function(p) {
					if($scope.rp == "--请选择--") {
						return true;
					} else {
						var agess = $scope.rp.split("-");
                    	var start = agess[0];
                    	var end = agess[1];
						if(p>=start && p<=end){
							return true;
						}else{
							return false;
						}
					}
				}
			})
		</script>
	</head>
	<body ng-app="anan" ng-controller="enen" style="width: 600px;">
		姓名查找<input  ng-model="cxname"/>　
				年龄查找<select ng-model="rp">
                            <option value="--请选择--">--请选择--</option>
                            <option value="11-20">11-20</option>
                            <option value="21-30">21-30</option>
                            <option value="31-40">31-40</option>
                            <option value="41-50">41-50</option>
                            <option value="51-60">51-60</option>
                        </select>
		　性别查找<select ng-model="cxsex"><option value="">按性别查找</option><option value="男">男</option><option value="女">女</option></select>
		<button ng-click="delall()">全部删除</button><button ng-click="delso()">批量删除</button>
		<table border="1" style="width: 500px;">
			<tr>
				<td style="width: 55px;"><input type="checkbox" ng-click="ckAll()" ng-model="flag" >全选</td>
				<td>序号</td>
				<td>姓名</td>
				<td>密码</td>
				<td>年龄</td>
				<td>性别</td>
				<td>操作</td>
			</tr>
			<tr ng-repeat="u in user|filter:{name: cxname}|filter:{sex: cxsex}" ng-show="yue(u.age)">
				<td><input type="checkbox" ng-model="u.ck"></td>
				<td>{{u.id}}</td>
				<td>{{u.name}}</td>
				<td>{{u.pwd}}<div ng-show="g"><input ng-model="u.pwd" style="width: 90px;"><button ng-click="g=false">保存</button></div></td>
				<td>{{u.age}}</td>
				<td>{{u.sex}}</td>
				<td><button ng-click="g=true">修改密码</button></td>
			</tr>
		</table>
		<button ng-click="m=true">新增用户</button>
		<div style="width: 200px;border: 1px solid #000000; margin-left: 490px;" ng-show="m">
				<div style="margin-left: 10px;">
					<h2 style="margin-left: 30px;">新增商品</h2><br />
					<input placeholder="请输入姓名" ng-model="cunname " /><br />
        			<input placeholder="请输入密码" ng-model="cunpwd " /><br />
		        	<input placeholder="请输入年龄 " ng-model="cunage"/><br />
		        	<input type="radio" name="xb" value="男" ng-model="cunsex"/>男  <input type="radio" name="xb" value="女" ng-model="cunsex"/>女
		        	<br />
		            <div style="width: 250px;" ng-show="cuo">
						<ul>
							<li ng-repeat="chenk in checkSub">{{chenk}}</li>
						</ul>
					</div><br />
		        <button ng-click="insert()">提交</button>
			</div>
			</div>
	</body>
</html>

Cometsinthenightsky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular范围查询

var app=angular.module("anan",[]); app.controller("enen",function($scope){ $scope.user = [{ ck:false, id: 1, name: '李1', pwd: 123456, age:18, sex:'女' }, {
复制链接

扫一扫