<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
.color{
color: red;
}
.clear1{
content: '\200B';
display: block;
clear: both;
}
.clear{
content: '\200B';
display: block;
clear: both;
margin-top: 20px;
}
a{
text-decoration: none;
color: black;
}
header{
width:100%;
height: 100px;
text-align: center;
line-height: 100px;
}
.left{
display: inline-block;
margin-top: -40px;
}
.right{
display: inline-block;
float: right;
}
.id1{
width: 15%;
float: left;
}
.id1 li{
border: 1px solid black;
height: 50px;
width: 120px;
line-height: 50px;
text-align: center;
background: gold;
}
.inner{
float: left;
margin-left: 20px;
width:80%;
}
.id2{
float: left;
margin: 10px;
}
</style>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script>
var myapp = angular.module("myapp",["ngRoute"]);
myapp.config(function ($routeProvider) {
$routeProvider.when("/one",{
templateUrl:"pages/one.html",
controller:"oneCtrl"
}).when("/two",{
templateUrl:"pages/two.html",
controller:"twoCtrl"
}).when("/three",{
templateUrl:"pages/three.html",
controller:"threeCtrl"
}).when("/richeng",{
templateUrl:"pages/richeng.html",
controller:"richengCtrl"
}).when("/home",{
templateUrl:"pages/home.html",
controller:"homeCtrl"
})
})
myapp.controller("oneCtrl",function ($scope) {
$scope.date=[{
id:'1235',name:'iphone',price:3400,num:10,check:false
},{
id:'425',name:'ipad',price:6400,num:500,check:false
},{
id:'235',name:'mini',price:2400,num:100,check:false
},{
id:'8635',name:'sumsung',price:100,num:1,check:false
}]
$scope.checkall=function () {
for(var i=0;i<$scope.date.length;i++){
$scope.date[i].check=!$scope.date[i].check;
}
}
$scope.delete=function (index) {
var b = confirm("确定删除吗?");
if(b){
$scope.date.splice(index,1);
}
}
$scope.deleteall=function () {
var a=confirm("确定要删除吗?");
if(a){
for(var i=$scope.date.length-1;i>=0;i--){
if($scope.date[i].check==true){
$scope.date.splice(i,1);
}
}
}
}
$scope.sort="name";
$scope.reve=false;
$scope.sortFun=function (column) {
if($scope.sort==column){
$scope.reve=!$scope.reve;
}
$scope.sort=column;
}
$scope.class1=function (name) {
if(name==$scope.sort){
return 'color';
}
}
$scope.arr=[];
var key1;
$scope.addbuy=function (index) {
for(var i=0;i<$scope.date.length;i++){
if($scope.date[i].id==index){
if(key1==index){
$scope.arr[$scope.arr.length-1].num++;
}else{
$scope.arr.push({id:$scope.date[i].id,name:$scope.date[i].name,price:$scope.date[i].price,num:1});
}
}
}
key1=index;
}
$scope.buycardel=function (index) {
$scope.arr.splice(index,1);
}
$scope.allmoney=function () {
$scope.money=0;
for(var i=0;i<$scope.arr.length;i++){
$scope.money+=$scope.arr[i].price*$scope.arr[i].num;
}
}
$scope.add1=function (index) {
$scope.arr[index].num++;
}
$scope.jian1=function (index) {
$scope.arr[index].num--;
}
})
var u1="https://free-api.heweather.com/v5/weather?city=";
var u2;
var u3="&key=545d63e185fc48169a43cbabba6e74d2";
myapp.controller("twoCtrl",function ($scope,$http) {
$scope.city="beijing";
$scope.ask=function () {
u2=$scope.city;
$http({
url:u1+u2+u3,
}).then(function (data) {
$scope.cityname=data.data.HeWeather5[0].basic.city;
$scope.cityweather=data.data.HeWeather5[0].daily_forecast[0].cond.txt_d;
$scope.citywendu=data.data.HeWeather5[0].daily_forecast[0].hum;
})
$scope.city="";
}
})
myapp.controller("threeCtrl",function ($scope) {
$scope.cheke=function () {
$scope.differ=$scope.guess-$scope.random;
$scope.num++;
$scope.guess="";
}
$scope.again=function () {
$scope.num=0;
$scope.random=Math.ceil(Math.random()*10);
console.log($scope.random)
$scope.differ=null;
$scope.guess="";
}
})
myapp.controller("richengCtrl",function ($scope) {
$scope.arr=[{
action:"爬山",done:false
},{
action:"会友",done:false
},{
action:"游泳",done:false
},{
action:"唱歌",done:false
},{
action:"喝酒",done:false
},{
action:"约会",done:false
},{
action:"休息",done:false
}]
$scope.addricheng=function () {
$scope.arr.push({action:$scope.newaction,done:false})
$scope.newaction="";
}
$scope.dones=[];
$scope.del1=function (index) {
$scope.dones.push({action:$scope.arr[index].action,done:true});
$scope.arr.splice(index,1);
}
})
myapp.controller("homeCtrl",function ($scope,$http) {
$http({
url:"package.json"
}).then(function (data) {
$scope.data=data.data;
})
})
</script>
</head>
<body ng-app="myapp">
<header class="clear1">
<h1 class="left">xx管理系统</h1>
</header>
<div class="clear">
<ul class="id1">
<li><a href="#home">首页</a></li>
<li><a href="#one">第一页</a></li>
<li><a href="#two">第二页</a></li>
<li><a href="#three">第三页</a></li>
<li><a href="#richeng">日程</a></li>
</ul>
<div ng-view="" class="inner"></div>
</div>
</body>
</html>
<!--home.html -->
<h1>首页</h1>
<ul>
<li ng-repeat="item in data" class="id2">
<p>{{item.title}}</p>
<img ng-src="{{item.img}}">
</li>
</ul>
<!--one.html -->
<input type="text" ng-model="search"><button ng-click="deleteall()">批量删除</button>
<table>
<thead>
<th><input type="checkbox" ng-click="checkall()"></th>
<th ng-click="sortFun('id')" ng-class="class1('id')">商品编号</th>
<th ng-click="sortFun('name')" ng-class="class1('name')">商品名称</th>
<th ng-click="sortFun('price')" ng-class="class1('price')">商品价格</th>
<th ng-click="sortFun('num')" ng-class="class1('num')">商品库存</th>
<td>商品小计</td>
<th>商品操作</th>
</thead>
<tbody>
<tr ng-repeat="item in date|filter:search|orderBy:sort:reve">
<td><input type="checkbox" ng-model="item.check"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price|currency:'¥'}}</td>
<td>{{item.num}}</td>
<td>{{item.price*item.num}}</td>
<td><button ng-click="delete($index)">删除</button><button ng-click="addbuy(item.id)">添加购物车</button></td>
</tr>
</tbody>
</table>
<h2>我的购物车</h2>
<table>
<thead>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品小计</th>
<th>商品操作</th>
</thead>
<tbody>
<tr ng-repeat="item in arr">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><button ng-click="add1($index)">+</button>{{item.num}}<button ng-click="jian1($index)">-</button></td>
<td>{{item.price*item.num}}</td>
<td><button ng-click="buycardel($index)">删除</button></td>
</tr>
<tr>
<td><button ng-click="allmoney()">计算总金额</button></td>
<td>{{money}}</td>
</tr>
</tbody>
</table>
<!--richeng.html -->
<input type="text" ng-model="newaction"><button ng-click="addricheng()">添加日程</button>
<table>
<thead>
<th>序号</th>
<th>日程</th>
<th>完成情况</th>
</thead>
<tbody>
<tr ng-repeat="item in arr">
<div ng-hide="item.done">
<td>{{$index+1}}</td>
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" ng-click="del1($index)"></td>
</div>
</tr>
</tbody>
</table>
<div>
<h2>已完成项目</h2>
<table>
<thead>
<th>序号</th>
<th>日程</th>
<th>完成情况</th>
</thead>
<tbody>
<tr ng-repeat="item in dones">
<td>{{$index+1}}</td>
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done"></td>
</tr>
</tbody>
</table>
</div>
<!--three.html -->
<input type="text" ng-model="guess">
<button ng-click="cheke()">检查</button><button ng-click="again()">再来一次</button>
<div>
<p ng-show="differ>0">猜大了</p>
<p ng-show="differ<0">猜小了</p>
<p ng-show="differ==0">猜对了</p>
</div>
<p>您猜了{{num}}次</p>
<!--two.html -->
<input type="text" ng-model="city"><button ng-click="ask()">点击查询</button>
<ul>
<li>城市: {{cityname}}</li>
<li>天气: {{cityweather}}</li>
<li>温度: {{citywendu}}</li>
</ul>