angularJS年龄查找与性别查找
来源:互联网 发布:什么是行知教育思想 编辑:程序博客网 时间:2024/05/29 09:13
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ text-align: center; } table{ border-collapse: collapse; margin: 20px auto; } th,td{ padding: 10px; border: 1px solid #000; } </style> <script src="../angular-1.5.5/angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function($scope){ $scope.data=[{ id:1, name:"张三", pas:"123", age:"23", sex:"男", check:false },{ id:2, name:"李四", pas:"345", age:"20", sex:"女", check:false },{ id:3, name:"王五", pas:"23", age:"45", sex:"女", check:false },{ id:4, name:"赵六", pas:"789", age:"45", sex:"女", check:false },{ id:5, name:"赵四", pas:"7887", age:"23", sex:"男", check:false }]; //按照年龄查找 $scope.ageSize="--请输选择--"; $scope.ageFun=function(item){ //return false; if($scope.ageSize!="--请输选择--"){ var arr=$scope.ageSize.split("-"); var min=arr[0]; var max=arr[1]; if(item.age>max||item.age<min){ return false; }else{ return true; } }else{ return true; } }; //按照性别查找 $scope.sex="--请输选择--"; $scope.sexFun=function(item){ if($scope.sex!="--请输选择--"){ if(item.sex==$scope.sex){ return true; }else{ return false; } }else{ return true; } }; //删除全部 $scope.delAll=function(){ $scope.data.length=0; }; //全选 $scope.checkBtn=false; $scope.checkAll=function(){ console.log($scope.checkBtn); if($scope.checkBtn==true){ for(var i=0;i<$scope.data.length;i++){ $scope.data[i].check=true; } }else{ for(var i=0;i<$scope.data.length;i++){ $scope.data[i].check=false; } } } //计数功能 var n=0; $scope.fx=function(index){ //console.log(index); if($scope.data[index].check==true){ n++; }else{ n--; } console.log(n); if(n==$scope.data.length){ $scope.checkBtn=true; }else{ $scope.checkBtn=false; } }; //批量删除 $scope.del=function(){ for(var i=0;i<$scope.data.length;i++){ if($scope.data[i].check==true){ $scope.data.splice(i,1); i--; } } }; //添加功能 $scope.show=false; $scope.addUser=function(){ $scope.show=true; } $scope.tj=function() { if($scope.nameNext==""||$scope.nameNext==null){ alert("姓名") }else if($scope.correct==true){ /*$scope.data.push({ name:$scope.nameNext, pas:$scope.pasNext, age:$scope.ageNext, sex:$scope.sexNext, check:false })*/ console.log("修改"); $scope.data[$scope.index].pas=$scope.pasNext; }else{ $scope.data.push({ name:$scope.nameNext, pas:$scope.pasNext, age:$scope.ageNext, sex:$scope.sexNext, check:false }) } $scope.show=false; }; $scope.correct=function(index){ console.log(index); $scope.show=true; $scope.nameNext=$scope.data[index].name; $scope.pasNext=$scope.data[index].pas; $scope.correct=true; //记录索引 $scope.index=index; } }) </script></head><body ng-app="myapp" ng-controller="myCtrl"><span>姓名查找</span><input type="text" placeholder="请输入姓名" ng-model="search"><span>年龄查找</span><select ng-model="ageSize"> <option>--请输选择--</option> <option>10-20</option> <option>20-30</option> <option>30-40</option> <option>40-50</option></select><span>性别查找</span><select ng-model="sex"> <option>--请输选择--</option> <option>男</option> <option>女</option></select><button ng-click="delAll()">删除全部</button><button ng-click="del()">批量删除</button><table> <thead> <tr> <th>全选<input type="checkbox" ng-model="checkBtn" ng-click="checkAll()"></th> <th>序号</th> <th>姓名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="item in data|filter:{name:search}|filter:ageFun|filter:sexFun"> <td><input type="checkbox" ng-model="item.check" ng-click="fx($index)"></td> <td>{{$index}}</td> <td>{{item.name}}</td> <td>{{item.pas}}</td> <td>{{item.age}}</td> <td>{{item.sex}}</td> <td><button ng-click="correct($index)">修改密码</button></td> </tr> </tbody></table><button ng-click="addUser()">添加用户</button><table ng-show="show"> <tbody> <tr> <td>姓名</td> <td><input type="text" ng-model="nameNext" placeholder="请输入姓名"></td> </tr> <tr> <td>密码</td> <td><input type="text" ng-model="pasNext" placeholder="请输入密码"></td> </tr> <tr> <td>年龄</td> <td><input type="number" ng-model="ageNext" placeholder="请输入年龄"></td> </tr> <tr> <td>性别</td> <td><input type="text" ng-model="sexNext" placeholder="请输入性别"></td> </tr> <tr> <td colspan="2"><button ng-click="tj()">提交</button></td> </tr> <!--<tr> <td>密码确认</td> <td><input type="text" ng-model="pasNext2"></td> </tr>--> </tbody></table></body></html>
阅读全文
0 0
- angularJS年龄查找与性别查找
- 【AngularJS】字符查找
- angularJS排序查找添加
- HTML angularJS 查找商品名称 数量
- MySql 根据身份证号判断年龄所属省份与性别男女
- tensorflow练习12:利用图片预测年龄与性别
- 查找--静态查找与动态查找
- AngularJS 用户名查询、年龄查询、性别查询、全部删除、批量删除、添加用户、修改密码
- 性别、年龄预测
- 性别、年龄预测
- 计算性别,年龄,生日
- 顺序查找与二分查找
- 顺序查找与二分查找
- 简单查找与折半查找
- 顺序查找与二分查找
- 二分查找与拉格朗日插值查找
- 顺序查找与二分查找
- 查找
- css样式
- 利用Appium实现App自动化测试
- hashMap,hashTable,hashSet,TreeMap的区别
- SPFA算法
- react -native Android真机调试注意的问题
- angularJS年龄查找与性别查找
- 合并排序/归并排序(递归与分治)-算法设计与分析
- 【JavaScript】JavaScript同步、异步、回调的执行顺序
- 异常的继承范围
- I NEED A OFFER!
- 智能小车stm32(寻迹测速)
- 数组冒泡排序
- cs:app 学习笔记(3)metore
- 告别迷茫和忧伤 --- 程序员