<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>八维管理</title>
<style>
li{ list-style: none;}
a{ text-decoration: none;}
.ul2 li{
float: left;
margin-left: 15px;
}
</style>
//需导入angular.js angular-route.js库文件
<script type="text/javascript"src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript">
var app=angular.module("myapp",["ngRoute"]);
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/home",{templateUrl:"div1.html"})
.when("/new",{templateUrl:"div2.html"})
.when("/cha",{
//绑定天气的控制器
controller:"chaxun",
templateUrl:"cha.html"})
.when("/day",{templateUrl:"div4.html"})
.otherwise({redirectTo:"/home"});
}]);
//绑定天气的控制器
app.controller("chaxun",function($scope,$http){
alert("绑定控制器");
$http({
url:"package.json"
}).then(function (data) {
$scope.data=data.data;
})
var u1="https://free-api.heweather.com/v5/weather?city=";
var u2;
var u3="&key=545d63e185fc48169a43cbabba6e74d2";
$scope.city="beijing";
$scope.show=false;
$scope.searcha=function () {
u2=$scope.city;
$scope.show=true;
$http({
url:u1+u2+u3
}).then(function (data) {
$scope.cityName=data.data.HeWeather5[0].basic.city;
$scope.date=data.data.HeWeather5[0].daily_forecast[0].date;
$scope.temp=data.data.HeWeather5[0].daily_forecast[0].tmp.max;
});
$scope.city="";
};
})
</script>
</head>
<body ng-app="myapp">
<!--左侧导航-->
<h1 align="center">标题</h1>
<ul class="ul">
<li><a href="#/home">首页</a></li>
<li><a href="#/new">新闻</a></li>
<li><a href="#/cha">查询</a></li>
<li><a href="#/day">行程</a></li>
</ul>
<!--天气 -->
<script type="text/ng-template" id="cha.html">
<div align="center">
<div style="margin-top: 30px">
<input type="text" ng-model="city">
<button ng-click="searcha()">点击查询</button>
<ul ng-show="show">
<li>{{cityName}}</li>
<li>{{date}}</li>
<li>{{temp}}℃</li>
</ul>
</div>
</div>
</script>
<div ng-view>
</div>
</body>
</html>
div1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{ width: 600px; height:400px;}
</style>
</head>
<center>
<body>
<div class="box">
<table width="600px" height="400px" cellpadding="20" cellspacing="0" border="0">
<tr>
<td align="center">樱桃小丸子1</td>
<td align="center">樱桃小丸子2</td>
<td align="center">樱桃小丸子3</td>
</tr>
<tr>
<td><img src="img/1.jpg"></td>
<td><img src="img/2.jpg"></td>
<td><img src="img/3.jpg"></td>
</tr>
<tr>
<td align="center">樱桃小丸子4</td>
<td align="center">樱桃小丸子5</td>
<td align="center">樱桃小丸子6</td>
</tr>
<tr>
<td><img src="img/4.jpg"></td>
<td><img src="img/5.jpg"></td>
<td><img src="img/6.jpg"></td>
</tr>
</table>
</div>
</body>
</center>
</html>
div3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气页面</title>
<style>
li{ list-style: none;}
</style>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctr",function($scope,$http){
$http({
url:"package.json"
}).then(function (data) {
$scope.data=data.data;
})
var u1="https://free-api.heweather.com/v5/weather?city=";
var u2;
var u3="&key=545d63e185fc48169a43cbabba6e74d2";
$scope.city="beijing";
$scope.show=false;
$scope.searcha=function () {
u2=$scope.city;
$scope.show=true;
$http({
url:u1+u2+u3
}).then(function (data) {
$scope.cityName=data.data.HeWeather5[0].basic.city;
$scope.date=data.data.HeWeather5[0].daily_forecast[0].date;
$scope.temp=data.data.HeWeather5[0].daily_forecast[0].tmp.max;
});
$scope.city="";
};
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctr">
<!--天气 -->
<div align="center">
<div style="margin-top: 30px">
<input type="text" ng-model="city">
<button ng-click="searcha()">点击查询</button>
<ul ng-show="show">
<li>{{cityName}}</li>
<li>{{date}}</li>
<li>{{temp}}℃</li>
</ul>
</div>
</div>
</body>
</html>
div4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日程界面</title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
var app=angular.module("myapp",[]);
//绑定控制器
app.controller("myctr",function($scope){
var dataa={
user:"我",
items:[
{action:"约刘诗诗吃饭",done:false},
{action:"约刘诗诗跳舞",done:false},
{action:"约刘诗诗敲代码",done:false},
{action:"约刘诗诗爬长城",done:false},
{action:"约刘诗诗逛天坛",done:false},
{action:"约刘诗诗看电影",done:false},
]
};
$scope.dataa=dataa;
$scope.complate=false;
$scope.count=function () {
var n=0;
for(var a=0;a<$scope.dataa.items.length;a++){
if($scope.dataa.items[a].done==false){
n++;
}
}
return n;
};
$scope.add=function () {
if ($scope.action){
$scope.dataa.items.push({"action":$scope.action,"done":false});
$scope.action="";
}
}
})
app.filter("doFilter",function () {
return function (items,flag) {
var 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;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctr">
<div align="center">
<h2 style="margin-top: 30px">我的日程<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 dataa.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>
</div>
</body>
</html>
扫一扫
1072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
