service sort 添加日程 验证
来源：互联网 发布：网络按通信范围可分为 编辑：程序博客网 时间：2024/05/22 16:07
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.service("User",function(){ var user={ id:"01", name:"Mary", Email:"Mary@126.com" }; this.getUser=function(){ return user; }; this.setUser=function(id,name,Email){ user.id=id; user.name=name; user.Email=Email; } }); myapp.controller("myctrl",function ($scope,User) { $scope.user=User.getUser(); $scope.setUser=function(){ User.setUser($scope.id,$scope.name,$scope.Email); } }); </script></head><body ng-app="myapp" ng-controller="myctrl"><ul> <li>{{user.id}}</li> <li>{{user.name}}</li> <li>{{user.Email}}</li></ul><div> id<input type="text" ng-model="id"><br/> name<input type="text" ng-model="name"><br/> Email<input type="text" ng-model="Email"><br/> <button ng-click="setUser()"></button></div></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ display: inline-block; width: 0; height: 0; border: 10px solid transparent; border-top: 10px solid red; } .bot{ display: inline-block; width: 0; height: 0; border: 10px solid transparent; border-bottom: 10px solid red; } </style> <script src="angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function($scope){ $scope.arr=[{name:"marry",salary:12345,sex:"girl",birthday:new Date(2016-10-05)}, {name:"Lily",salary:12425,sex:"girl",birthday:new Date(2016-04-05)}, {name:"Jeny",salary:87145,sex:"girl",birthday:new Date(1996-10-05)}, {name:"Rose",salary:23845,sex:"girl",birthday:new Date(1995-10-05)}, {name:"Tom",salary:86565,sex:"boy",birthday:new Date(1994-10-05)}]; $scope.search=""; $scope.searchFun=function(obj){ //console.log(obj); if($scope.search!=""){ if(obj.name.toLowerCase().indexOf($scope.search.toLowerCase())!=-1){ return true; }else{ return false; } }else{ return true; } }; $scope.sort="name"; $scope.revers=false; $scope.sortFun=function(column){ //console.log(column); if($scope.sort==column){ $scope.revers=!$scope.revers; }else{ $scope.revers=false; } $scope.sort=column; }; $scope.getClass=function(column){ if($scope.sort==column){ if($scope.revers==false){ return "top"; }else{ return "bot" } } } }) </script></head><body ng-app="myapp" ng-controller="myCtrl"><input type="text" ng-model="search"><table> <thead> <tr> <th>编号</th> <th ng-click="sortFun('name')">姓名<span ng-class="getClass('name')"></span></th> <th ng-click="sortFun('salary')">薪资<span ng-class="getClass('salary')"></span></th> <th ng-click="sortFun('sex')">性别<span ng-class="getClass('sex')"></span></th> <th ng-click="sortFun('birthday')">生日<span ng-class="getClass('birthday')"></span></th> </tr> </thead> <tbody> <tr ng-repeat="item in arr|filter:searchFun:value|orderBy:sort:revers"> <td>{{$index}}</td> <td>{{item.name}}</td> <td>{{item.salary}}</td> <td>{{item.sex}}</td> <td>{{item.birthday}}</td> </tr> </tbody></table></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border-collapse: collapse; } td{ padding: 10px; border: 1px solid #000; } </style><script src="jquery-3.2.1.min.js"></script> <script src="angular.min.js="></script> <script> /* 1、基本布局 2、准备模拟数据 */ // 模拟数据 var data = { user:"吴四", items:[ {action:"约刘诗诗吃饭",done:false}, {action:"约刘诗诗跳舞",done:false}, {action:"约刘诗诗敲代码",done:true}, {action:"约刘诗诗爬长城",done:false}, {action:"约刘诗诗逛天坛",done:false}, {action:"约刘诗诗看电影",done:false} ] }; var myapp=angular.module("myapp",[]); /*这里的是自定义过滤器，将数组items 过滤之后返回arr*/ myapp.filter("doFilter",function(){ /*传入两个参数，一个数组items，另一个是complate*/ return function(items,flag){ var arr=[]; /*遍历items,如果dones是false或者下边的按钮在选中状态，就将这一条item push到arr中*/ for(var i=0;i<items.length;i++){ if(items[i].done==false){ arr.push(items[i]); }else{ if(flag==true){ arr.push(items[i]); } } } return arr; } }); myapp.controller("myCtrl",function($scope){ $scope.data=data; $scope.complate=false; /*判断还有几件事儿没有完成*/ $scope.count=function(){ var n=0; /*判断还有几件事儿没有完成*/ for(var i=0;i<$scope.data.items.length;i++){ if($scope.data.items[i].done==false){ n++; } } return n; }; /*添加新的日程*/ $scope.add=function(){ /*对$scope.action进行一下非空判断*/ if($scope.action){ /*如果输入了内容之后，就在数组的最后加入一条新内容*/ $scope.data.items.push({"action":$scope.action,"done":false}); /*添加完成之后，将input置空*/ $scope.action=""; } }; }); </script></head><body ng-app="myapp" ng-controller="myCtrl"><h2>吴四的日程<span ng-bind="count()"></span></h2><div> <input type="text" ng-model="action"><button ng-click="add()">添加</button></div><table> <thead> <tr> <th>序号</th> <th>日程</th> <th>完成情况</th> </tr> </thead> <tbody> <tr ng-repeat="item in data.items|doFilter:complate"> <td>{{$index}}</td> <td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done"></td> </tr> </tbody></table><div>显示全部<input type="checkbox" ng-model="complate"></div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> span{ color: red; } </style> <script src="jquery-3.2.1.min.js"></script> <script> $(function () { $("#name").blur(function () { var le=$(this).val().length; console.log(le) if(le<3){ $("#sname").text("用户名格式不正确"); }else { $("#sname").text("✔"); } }) $("#emil").blur(function () { var le=$(this).val(); if(le.indexOf("@")>=0){ $("#semil").text("✔"); }else { $("#semil").text("用户名格式不正确"); } }) $("#num").blur(function () { var le=$(this).val().length; if(le!=11){ $("#snum").text("用户名格式不正确"); }else { $("#snum").text("✔"); } }) $("#card").blur(function () { var le=$(this).val().length; if(le!=18){ $("#scard").text("用户名格式不正确"); }else { $("#scard").text("✔"); } }) }) </script></head><body>姓名:<input type="text" id="name"><span id="sname"></span><br>Email地址:<input type="text" id="emil"><span id="semil"></span><br>手机号:<input type="text" id="num"><span id="snum"></span><br>身份证号码:<input type="text" id="card"><span id="scard"></span><br></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> span{ color: red; } </style><script src="jquery-3.2.1.min.js"></script> <script> $(function () { $("#name").blur(function () { var le=$(this).val().length; console.log(le) if(le<3){ $("#sname").text("用户名格式不正确"); }else { $("#sname").text("✔"); } }) $("#emil").blur(function () { var le=$(this).val(); if(le.indexOf("@")>=0){ $("#semil").text("✔"); }else { $("#semil").text("用户名格式不正确"); } }) $("#num").blur(function () { var le=$(this).val().length; if(le!=11){ $("#snum").text("用户名格式不正确"); }else { $("#snum").text("✔"); } }) $("#card").blur(function () { var le=$(this).val().length; if(le!=18){ $("#scard").text("用户名格式不正确"); }else { $("#scard").text("✔"); } }) }) </script></head><body>姓名:<input type="text" id="name"><span id="sname"></span><br>Email地址:<input type="text" id="emil"><span id="semil"></span><br>手机号:<input type="text" id="num"><span id="snum"></span><br>身份证号码:<input type="text" id="card"><span id="scard"></span><br></body></html>>
阅读全文
0 0
- service sort 添加日程 验证
- 日程
- 日程
- 日历程序，支持添加日程提醒
- calendar添加日程到系统日历
- Android向系统日历中添加日程事件
- 向系统日历添加日程提醒的规则
- 为BindingList添加Sort
- web Service SoapHeader 验证
- ofbiz service 参数验证
- vs2008添加web service
- C# Windows Service 添加
- 添加一个系统service
- vs2010添加web service
- android service 添加
- icinga 添加http service
- 添加service命令tomcat
- Linux 如何添加Service
- angularjs从网上获取json数据
- 网络判断
- Struts2基本使用方法
- 关于c++ new操作符的重载
- 数据库
- service sort 添加日程 验证
- 仿今日头条项目 MainActivity
- Swift4学习笔记-0 写在开始之前
- 首期企业级区块链训练营怎么玩？
- 网络图片采样
- 邮箱
- 仿今日头条Fragment
- 数据库传值
- 清除缓存和版本更新
