<!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>>