angularJS排序查找添加
来源:互联网 发布:知乎可以邮箱注册吗 编辑:程序博客网 时间:2024/05/23 20:52
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="angular-1.5.5/angular.min.js"></script> <style> *{ text-align: center; } table{ border-collapse: collapse; margin: 20px auto; } th,td{ padding: 10px; border: 1px solid #000; } </style> <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) { 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 () { 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) { if($scope.data[index].check==true){ n++; }else{ 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[$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; }; }) </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>21-30</option> <option>31-40</option> <option>41-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="number" ng-model="pasNext" placeholder="请输入密码"></td> </tr> <tr> <td>年龄</td> <td><input type="text" 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> </tbody></table></body>
阅读全文
0 0
- angularJS排序查找添加
- AngularJs添加 删除 排序 查找 最后汇总的代码
- AngularJs实现添加排序
- angularjs添加和排序
- angularjs添加排序查询
- angularjs排序、查询、添加
- AngularJS+添加+条件筛选+排序
- angularjs添加列表和排序
- AngularJS添加删除查询排序
- AngularJS排序查询以及添加
- AngularJs添加删除排序Y
- angularJS添加表格,通过过滤器查找
- angularjs排序查找修改替换完整版
- AngularJs 选择框排序+添加用户
- AngularJS+查询+敏感字+排序+添加
- AngularJS+查询+敏感字+排序+添加
- Angular添加删除查找排序日期等
- angularJs添加
- jq 复制
- es6 Generator Thunk函数实现自动执行
- C#调用cmd执行命令获取返回值
- StreamToString 帮助类
- Mysql存储过程 ----- 简单使用
- angularJS排序查找添加
- 金字塔原理——绪论(笔记)
- Java中String, StringBuffer, StringBuilder的区别和常用方法
- 设计模式之策略模式
- python3实现简单的基于用户的协同过滤
- HDU
- Swift_泛型
- BZOJ 1598 浅谈AstaR启发式搜索有向图网络K阶最短路
- 设计Student类