Angular之终极表
来源：互联网 发布：淘宝网商城玉镯 编辑：程序博客网 时间：2024/05/18 12:39
<!DOCTYPE html><html ng-app="myapp"><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .even{ background: #999999; } tr:hover{ background: #0ff; } .g:hover{ cursor:pointer; } </style> <script type="text/javascript" src="jquery.1.12.4.js"></script> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="angular-route.js"></script> <script type="text/javascript" src="angular-1.3.0.js"></script> <script type="text/javascript"> var data=[{ name:"张三",age:45,py:"zhangsan",zw:"总经理",cz:"cz1" },{ name:"李四",age:43,py:"lisi",zw:"总经理",cz:"cz2" },{ name:"王五",age:40,py:"wangwu",zw:"总经理",cz:"cz3" },{ name:"赵六",age:33,py:"zhaoliu",zw:"总经理",cz:"cz4" },{ name:"周七",age:32,py:"zhouqi",zw:"总经理",cz:"cz5" }]; var ind=6; var app=angular.module("myapp",["ngRoute"]); app.controller("child",function($scope){ $scope.annian=function(){ if($scope.n1==1){ $scope.datas.sort(function(j1,j2){ return j1.age>j2.age?1:-1; }); }else{ $scope.datas.sort(function(j1,j2){ return j1.age<j2.age?1:-1; }); } } $scope.mingan=function(){ if($scope.ct.indexOf("胡锦涛")>=0||$scope.ct.indexOf("习近平")>=0){ alert("有敏感字"); $scope.ct=""; } } $scope.ass=function(a){ var b=confirm("确定要删除吗?"); if(b){ var c=confirm("确定要删除吗?"); if(c){ var as=[]; var d=0; for(var i=0;i<$scope.datas.length;i++){ if(a!=$scope.datas[i].cz){ as[d]=$scope.datas[i]; d++; } } data=as; $scope.datas=as; } } } $scope.chaxun=function(){ var as=[]; var b=0; var fl=true; if($scope.ct==undefined||$scope.ct==""){ alert("请输入姓名"); }else{ for(var i=0;i<$scope.datas.length;i++){ if($scope.datas[i].name.indexOf($scope.ct)>=0){ as[b]=$scope.datas[i]; b++; fl=false; } } if(fl){ alert("未找到内容"); }else{ $scope.datas=as; } } } $scope.flage=false; $scope.datas=data; $scope.adduser=function(){ $scope.flage=true; } $scope.ba1=function(){ var name=document.getElementById("t_name").value; var age=document.getElementById("t_age").value; var py=document.getElementById("t_pinyin").value; var wz=document.getElementById("t_zhiwei").value; if(name==""||age==""||py==""||wz==""){ alert("您有未填选项"); }else if(isNaN(age)){ alert("年龄格式错误"); }else{ $scope.datas.push({ name:name,age:age,py:py,zw:wz,cz:"cz"+ind }); ind++; $scope.flage=false; } } }); </script></head><body ng-controller="child"><div style="width: 800px;height: 800px;margin: 50px auto"><div style="width: 798px;height: auto"> <div style="float: left;margin-left: 100px;margin-right: 10px;font-size: 13px;margin-top: 5px">姓名查询条件</div><input ng-change="mingan()" type="text" ng-model="ct" placeholder="敏感字为'胡锦涛','习近平'"> <select ng-model="n1" ng-change="annian()" style="float: right;margin-right: 20px;margin-top: 5px"> <option value="">按年龄倒序</option> <option value="1">按年龄正序</option></select></div> <span style="font-size: 13px">用户列表</span> <table style="width: 800px;height: auto;border: 1px solid black" align="center" valign="center" cellspacing="0"> <tr bgcolor="#666666"> <td style="border-right: 1px solid #666666">姓名</td> <td style="border-right: 1px solid #666666">年龄</td> <td style="border-right: 1px solid #666666">拼音</td> <td style="border-right: 1px solid #666666">职位</td> <td style="border-right: 1px solid #666666">操作</td> </tr> <tr ng-repeat="data in datas" ng-class="{'even':$even}" > <td style="border-right: 1px solid #666666">{{data.name}}</td> <td style="border-right: 1px solid #666666">{{data.age}}</td> <td style="border-right: 1px solid #666666">{{data.py}}</td> <td style="border-right: 1px solid #666666">{{data.zw}}</td> <td style="border-right: 1px solid #666666"><span ng-click="ass(data.cz)" class="g" id="{{data.cz}}">删除</span></td> </tr> </table> <div style="margin-left: 300px;margin-top: 20px"><input type="button" style="width: 80px;height: 30px;border-radius: 5px;border: 1px solid black " ng-click="chaxun()" value="查询"> <a href="#/s"><input style="width: 80px;height: 30px;border-radius: 5px;margin-left: 30px;border: 1px solid black" type="button" ng-click="adduser()" value="添加用户"></a> </div> <table ng-if="flage" style="width: 300px;height:auto;border: 1px solid black;text-align: right;margin-top: 20px" align="center"> <tr><th colspan="2" style="text-align: center">添加用户信息</th></tr> <tr><td>姓名</td><td><input type="text" id="t_name" style="margin-right: 20px"> </td></tr> <tr><td>年龄</td><td><input type="text" id="t_age" style="margin-right: 20px"> </td></tr> <tr><td>拼音</td><td><input type="text" id="t_pinyin" style="margin-right: 20px"> </td></tr> <tr><td>职位</td><td><input type="text" id="t_zhiwei" style="margin-right: 20px"> </td></tr> <tr><td colspan="2" style="text-align: center"><input type="button" ng-click="ba1()" value="保存"></td></tr> </table></div></body></html>阅读全文
0 0
- Angular之终极表
- angular之用户表
- angular js 终极购物车
- angular js 终极购物车
- angular之发货信息表
- TOMCAT之终极优化
- selenium之终极封装
- Angular系列文章之angular路由
- Angular系列文章之angular路由
- Angular系列文章之angular路由
- angular之路由，模板
- Angular 学习之 filter
- angular之$parse
- Angular之路-hello
- angular 之表单验证
- Angular之$resource
- Angular之解读过滤器
- Angular之基础知识
- JZOJ 5425. 【NOIP2017提高A组集训10.25】数论
- android中的文件操作详解以及内部存储和外部存储
- app嵌套h5页面的问题总结
- 博客导读
- 结构体
- Angular之终极表
- MongoDB日志按照日期生成
- 深入理解Java的接口和抽象类
- python学习记录：字符串
- #if 和#ifdef的区别
- 关于如何使用eclipse开发工具写java代码
- org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sqlSession'
- js刷新页面方法
- 深入HBase架构解析（二）
