ionic练习(6)- 用户管理(添加,查询,排序)
来源:互联网 发布:淘宝客服介入会怎么样 编辑:程序博客网 时间:2024/06/06 17:20
<!DOCTYPE html><html ng-app="myApp"><head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery.1.12.4.js"></script> <script type="text/javascript" src="angular-1.3.0.js"></script> <title>用户管理(添加,查询,排序)</title> //实现背景颜色 <style type="text/css"> //实现奇数行背景颜色 .even_cls { background-color: #fff; } //实现偶数行背景颜色 .odd_cls { background-color: #999; } </style> <script type="text/javascript"> //添加初始化数据 var example_data = [ { xing_ming: "张三", wei_zhi: "控球后卫", qiu_hao: 11, piao_shu: 999 }, { xing_ming: "李四", wei_zhi: "大前锋", qiu_hao: 21, piao_shu: 888 }, { xing_ming: "王五", wei_zhi: "小前锋", qiu_hao: 23, piao_shu: 777 }, { xing_ming: "赵六", wei_zhi: "中锋", qiu_hao: 10, piao_shu: 666 }, { xing_ming: "周七", wei_zhi: "得分后卫", qiu_hao: 1, piao_shu: 555 } ]; var app = angular.module("myApp", []); app.service("a", function () { this.findAll = function () { }; this.getRow = function () { }; }); app.factory("a", function () { return { findAll: function() { }, getRow: function() { } }; }); app.factory("$interval", function () { return function() { }; }); app.constant("EXAMPLE_DATA", example_data); //添加信息表 app.controller("myCtrl", function ($scope, EXAMPLE_DATA) { //隐藏添加信息表 $scope.data = EXAMPLE_DATA; $scope.add_qiu_yuan_form = false; //显示添加信息表 $scope.showAddQiuYuanForm = function () { $scope.add_qiu_yuan_form = true; }; //添加信息 //要求 $scope.submitQiuYuanForm = function () { //输入信息不能为空 if ($scope.xing_ming == undefined || $scope.xing_ming == "") { return; } if ($scope.wei_zhi == undefined || $scope.wei_zhi == "") { return; } if ($scope.qiu_hao == undefined || $scope.qiu_hao == "") { return; } if ($scope.piao_shu == undefined || $scope.piao_shu == "") { return; } //输入信息的要求 if (!/^\d+$/.test($scope.qiu_hao)) { alert("球号必须是整数!"); return; } if (!/^\d+$/.test($scope.piao_shu)) { alert("票数必须是整数!"); return; } //将输入信息添加到页面中 $scope.data.push( { xing_ming: $scope.xing_ming, wei_zhi: $scope.wei_zhi, qiu_hao: $scope.qiu_hao, piao_shu: $scope.piao_shu } ); //清空已添加的信息 $scope.xing_ming = ""; $scope.wei_zhi = ""; $scope.qiu_hao = ""; $scope.piao_shu = ""; $scope.add_qiu_yuan_form = false; }; //输入框为空检测 $scope.search = function () { if ($scope.search_xing_ming_value == undefined || $scope.search_xing_ming_value == "") { $("tr").show(); return; } //敏感词检测 if ($scope.search_xing_ming_value == "习近平") { alert("敏感词"); return; } //循环查询,将查询的信息显示出来 for (var idx in $scope.data) { var trIdx = parseInt(idx) + 1; if ($scope.search_xing_ming_value == $scope.data[idx].xing_ming) { $("tr:eq(" + trIdx + ")").show(); } else { $("tr:eq(" + trIdx + ")").hide(); } } }; //排序 - 正序/倒序 $scope.order2 = function (num) { if (num == "") { return; } return (parseInt(num) == 2) ? true : false; } }); app.filter("mgc", function () { return function (msg, flag) { return msg.replace(flag, "***"); }; }); MVC M : Model V: View C: Ctrl Ctrl </script></head><body ng-controller="myCtrl">查询:<input type="text" ng-model="search_xing_ming_value" ng-change="search()"/><!--<select ng-model="search_piao_shu_value" ng-change="order()">--><!--<option value="0">排序</option>--><!--<option value="1">票数正序</option>--><!--<option value="2">票数倒序</option>--><!--</select><br/>--><select ng-model="search_piao_shu_value"> <option value="">排序</option> <option value="1">票数正序</option> <option value="2">票数倒序</option></select><br/><button ng-click="showAddQiuYuanForm()">新增球员</button><table border="1"> <thead> <tr style="background-color: #666"> <th>姓名</th> <th>位置</th> <th>球号</th> <th>票数</th> </tr> </thead> <tbody> <tr ng-repeat="qiu_yuan in data | orderBy: 'piao_shu': order2(search_piao_shu_value)" ng-class="{even_cls: !$even, odd_cls: !$odd}"> <td>{{ qiu_yuan.xing_ming | mgc: '习近平' }}</td> <td ng-bind="qiu_yuan.wei_zhi"></td> <td ng-bind="qiu_yuan.qiu_hao"></td> <td ng-bind="qiu_yuan.piao_shu"></td> </tr> </tbody></table><div>敏感词:习近平</div><div ng-show="add_qiu_yuan_form"> <p>添加球员</p> <p>姓名:<input type="text" ng-model="xing_ming"/></p> <p>位置:<input type="text" ng-model="wei_zhi"/></p> <p>球号:<input type="text" ng-model="qiu_hao"/></p> <p>票数:<input type="text" ng-model="piao_shu"/></p> <p> <button ng-click="submitQiuYuanForm()">提交</button> </p></div></body></html>
阅读全文
0 0
- ionic练习(6)- 用户管理(添加,查询,排序)
- ionic练习(5)- 用户管理(查询信息)
- ionic练习(4)- 用户管理(删除信息)
- 用户操作(添加、删除、敏感词、排序、查询)
- 用户表(查询数据 、添加数据 、排序 、点击删除 、修改密码 、批量删除 、全部删除)
- 姓名查询 年龄排序 添加用户 删除
- 订单用户表1(用户查询 、手机号查询 、选择城市 、选择状态、月份查询 、ID排序 、添加数据、批量发货、批量删除)
- Linux用户管理(添加,删除,修改)
- Linux 用户管理 (添加-删除-修改)
- RedHat用户管理(添加,删除,修改)
- ionic练习(1)- 实现页面切换
- angular(查询、删除、添加、排序)案例
- MySQL学习之:用户管理(添加用户,删除用户,添加权限,查看权限,密码等)
- 模糊查询,批量删除, 添加用户,隔行变色,排序,过滤器
- Oracle用户管理-练习
- 订单用户表2(用户名查询、手机号查询、选择城市、选择状态、选择月份、ID排序、添加数据、批量发货、批量删除、敏感字、修改数据)
- linux用户管理命令(添加,删除,修改)
- linux用户管理命令(添加,删除,修改)
- Construct2从入门到不放弃
- logback日志框架的知识
- 系统开发排行榜
- SQLite查询计划器和优化(译)
- 2017.10.23 卡牌游戏 失败总结
- ionic练习(6)- 用户管理(添加,查询,排序)
- java面向对象四大特性-多态
- angularJs 公告墙
- 带你搞懂朴素贝叶斯分类算法
- 51nod大鱼吃小鱼
- 图
- Linux命令之readelf详解
- Openfire分析之四:消息路由
- 过滤敏感字,排序等综合题