//配置url的时候，页面功能也在这个页面实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
color: black;
font-size: 30px;
}
li{
list-style: none;
padding-top: 20px;
padding-left: 90px;
}
*{
padding: 0;
margin: 0;
}
.mynav{
width: 100%;
height: 200px;
background: #0a9dc7;
}
.mynav p{
color: black;
font-weight: bold;
font-size: 55px;
text-align: center;
line-height: 200px;
}
.mybottom{
width: 100%;
height: 555px;
background: #000;
}
.left{
float: left;
width: 20%;
height: 100%;
background: yellow;
}
.left ul{
margin-left: 20px;
padding: 10px;
}
.right{
float: right;
width: 80%;
height: 100%;
background: greenyellow;
}
</style>
<script src="../swipter/angular.min.js"></script>
<script src="../swipter/angular-route.js"></script>
<script>
var myapp=angular.module("myapp",["ngRoute"]);
myapp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/shouye',{
templateUrl:'shouye.html',
controller: 'shouyeController'
})
.when('/news',{
templateUrl:"news.html",
controller: 'newsController'
})
.when('/youxi',{
templateUrl:"youxi.html",
controller: 'youxiController'
})
.when('/chaxun',{
templateUrl:"chaxun.html",
controller: 'chaxunController'
})
.when('/richeng',{
templateUrl:"richeng.html",
controller: 'richengController'
})
.otherwise({redirectTo:'shouye'});
}]);
myapp.controller("shouyeController",function ($scope,$http) {
$http({
url: 'json/package.json'
}).then(function (data) {
$scope.data=data.data;
console.log($scope.data);
})
});
myapp.controller("newsController",function ($scope) {
var items=[
{"id":1245,"name":"键盘","price":1234,"kucun":12,"check":false},
{"id":1545,"name":"鼠标","price":1204,"kucun":32,"check":false},
{"id":1295,"name":"衣服","price":954,"kucun":45,"check":false},
{"id":1345,"name":"电脑","price":1034,"kucun":92,"check":false}
];
$scope.items=items;
$scope.reser="price";
$scope.checkall=function () {
if($scope.allcheck==true){
for(var i=0;i<items.length;i++){
$scope.items[i].check=true;
}
}else {
for(var i=0;i<items.length;i++){
$scope.items[i].check=false;
}
}
}
$scope.itemcheck=function () {
var flag=0;
for(var i=0;i<items.length;i++){
if( $scope.items[i].check==true){
flag++;
}
}
if(flag==items.length){
$scope.allcheck=true;
}else {
$scope.allcheck=false;
}
}
$scope.deleteall=function () {
var is = confirm("确认删除?");
if (is == true) {
var arr = [];
for (var i = 0; i < items.length; i++) {
if ($scope.items[i].check == false) {
arr.push($scope.items[i]);
}
}
$scope.items = arr;
}
}
$scope.delete = function ($index) {
if($index>=0){
if(confirm("是否删除"+$scope.items[$index].name+"商品") ){
$scope.items.splice($index,1);
}
}
};
});
myapp.controller("chaxunController",function ($scope,$http) {
var ul1="https://free-api.heweather.com/v5/weather?city=";
var ul2;
var ul3="&key=545d63e185fc48169a43cbabba6e74d2";
$scope.city="阳泉";
$scope.show=false;
$scope.chaxun=function () {
ul2=$scope.city;
$scope.show=true;
$http({
url:ul1+ul2+ul3
}).then(function (data) {
console.log(data);
$scope.city2=data.data.HeWeather5[0].basic.city;
$scope.date=data.data.HeWeather5[0].suggestion.air.txt;
$scope.dir=data.data.HeWeather5[0].now.wind.dir;
$scope.city="";
});
/* $scope.show=false;*/
}
});
myapp.filter("doFilter",function () {
return function (item,flag) {
var arr=[];
for(var i=0;i<item.length;i++){
if (item[i].done==false){
arr.push(item[i]);
}else {
if(flag==true){
arr.push(item[i]);
}
}
}
return arr;
}
});
myapp.controller("richengController",function ($scope) {
var data={
user:"小名",
items:[
{action:"约赵丽颖吃饭",done:false},
{action:"约赵丽颖跳舞",done:false},
{action:"约赵丽颖敲代码",done:false},
{action:"约赵丽颖逛街",done:false},
{action:"约赵丽颖看电影",done:true},
{action:"约赵丽颖看星星",done:false}
]
};
$scope.data=data;
$scope.count=function () {
var n=0;
for(var i=0;i<data.items.length;i++){
if(data.items[i].done==false){
n++;
}
}
return n;
};
$scope.add=function () {
if($scope.mode){
data.items.push({"action":$scope.mode,"done":false});
}
}
});
myapp.controller("youxiController",function ($scope) {
$scope.num=0;
$scope.random=Math.ceil(Math.random()*10);
$scope.check=function () {
$scope.differ=$scope.guess-$scope.random;
$scope.num++;
};
$scope.again=function () {
$scope.num=0;
$scope.guess="";
$scope.differ=null;
}
});
</script>
</head>
<body ng-app="myapp">
<div>
<nav class="mynav">
<p>后台管理系统</p>
</nav>
<div class="mybottom">
<div class="left">
<ul>
<li><a href="#shouye">首页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#chaxun">查询</a></li>
<li><a href="#richeng">日程</a></li>
<li><a href="#youxi">游戏</a></li>
</ul>
</div>
<div class="right" ng-view=""></div>
</div>
</div>
</body>
</html>
//查询页面
<style> .haha4{ width: 400px; height: 400px; margin: 100px auto; text-align: center; } </style> <div class="haha4"> <input type="text" ng-model="city"/><button ng-click="chaxun()">查询</button> <ul ng-show="show"> <li>{{city2}}</li> <li>{{date}}</li> <li>{{dir}}</li> </ul> </div>
//猜字游戏
<style> .haha6{ margin: 100px auto; margin-left: 500px; } </style> <div class="haha6"> <h2>请输入1-10的整数</h2> <input type="text" ng-model="guess"/><button ng-click="check()">检查</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> <p>猜了<span ng-bind="num">次了</span></p> </div> </div>
//日程
<style> .haha5{ width: 700px; height: 700px; margin: 100px 500px; padding: 10px; } </style> <div class="haha5"> <h2>这是**的日程<span ng-bind="count()"></span></h2> <div> <input type="text" ng-model="mode"/><button ng-click="add()">添加</button> </div> <table> <tr> <td>序号</td> <td>日程</td> <td>完成情况</td> </tr> <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> </table> <div>显示全部:<input type="checkbox" ng-model="complate"/></div> </div>
//商品的增删
<style> table{ border: 1px solid #000; border-collapse: collapse; margin-top: 20px; } tr,td{ border: 1px solid #000; border-collapse: collapse; padding: 20px; text-align: center; } td:hover{ color: red; } .haha3{ margin: 80px 300px; } .top{ width: 0; height: 0; } </style> <div class="haha3"> <input type="text" ng-model="sou"/><button ng-click="deleteall()">批量删除</button> </div> <div> <table> <tr> <td><input type="checkbox" ng-model="allcheck" ng-click="checkall()"/></td> <td ng-click="xuan();desc=!desc">id</td> <td ng-click="xuan();desc=!desc">商品名称</td> <td ng-click="xuan();desc=!desc">商品价格</td> <td ng-click="xuan();desc=!desc">商品库存</td> <td>操作</td> </tr> <tr ng-repeat="item in items | orderBy:reser:desc | filter:sou"> <td><input type="checkbox" ng-model="item.check" ng-click="itemcheck()"/></td> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.price | currency:'￥: '}}</td> <td>{{item.kucun}}</td> <td><button ng-click="delete($index)">删除</button></td> </tr> </table> </div>
//首页（获取图片）
<style> .haha1{ width: 100%; } .haha2{ float: left; padding: 5px; } </style> <div class="haha1"> <ul ng-repeat="items in data" class="haha2"> <li>{{items.id}}</li> <li>{{items.title}}</li> <li> <img ng-src="{{items.img}}"/> </li> </ul> </div>
9074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
