<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<style>
.div_main{
width: 1000px;
height: 800px;
}
.div_left{
float: left;
width: 100px;
height: 800px;
background-color:green;
}
.div_center{
float: left;
width: 800px;
height: 800px;
}
.div_right{
float: left;
width: 100px;
height: 800px;
background-color: #00B7FF;
}
.title{
height: 60px;
width: 100%;
margin-top: -20px;
}
.main{
height: 740px;
width: 800px;
}
.main_left{
height: 740px;
width: 150px;
float: left;
}
.main_right{
height: 740px;
width: 600px;
float: left;
}
ul li a{
text-decoration: none;
}
ul li{
list-style: none;
line-height: 50px;
}
</style>
</head>
<body ng-app="routeDemo" >
<script>
var myApp=angular.module('routeDemo',['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/shouye',{
templateUrl:'../views/page/shouye.html',
controller:"shouyeCtrl"
})
.when('/news',{
templateUrl:'../views/page/news.html',
controller:"newsCtrl"
})
.when('/select',{
templateUrl:'../views/page/select.html',
controller:"selectCtrl"
})
.when('/works',{
templateUrl:'../views/page/works.html',
controller:"worksCtrl"
})
.when('/games',{
templateUrl:'../views/page/games.html',
controller:"gamesCtrl"
})
}]);
<!-- 网络请求-->
myApp.controller("shouyeCtrl",function ($scope,$http) {
$http({
url:"../views/package.json"
}).then(function (data) {
$scope.data=data.data;
})
});
myApp.controller("newsCtrl",function ($scope) {
<!--初始化数据 -->
$scope.item=[
{id:1234,name:"ipad",price:3400,num:10,check:false},
{id:1244,name:"aphone",price:6400,num:100,check:false},
{id:1334,name:"mypad",price:4400,num:20,check:false},
{id:8234,name:"zpad",price:8400,num:130,check:false},
]
<!--排序 -->
$scope.orderName="id";
$scope.order=false;
$scope.px=function (column) {
if($scope.orderName==column){
$scope.order=!$scope.order;
}else{
$scope.order=false;
}
$scope.orderName=column;
};
<!--删除单个 -->
$scope.remove=function (index) {
if (confirm("确定删除吗?")){
$scope.item.splice(index,1);
}
}
<!--全选状态 -->
$scope.checkAll=function (val) {
if (val){
$scope.xuanz=true;
}else{
$scope.xuanz=false;
}
}
<!-- 删除-->
$scope.del=function () {
//判断是否确认删除
if($scope.xuanz||$scope.checkD){
if (confirm("确认删除")){
//删除所有商品信息
if($scope.checkAll){
$scope.item.splice(0,$scope.item.length);
//让商品信息管理页面为空白页面
}else{
for(var i=$scope.xuan1.length-1;i>=0;i--){
console.log($scope.xuan1[i]);
for(var j=0;j<$scope.item.length;j++){
console.log($scope.item[j].id==$scope.xuan1[i]);
if($scope.item[j].id==$scope.xuan1[i]){
$scope.item.splice(j,1);
}
}
}
}
}
}else{
alert("先进行选中要删除的商品信息");
}
}
$scope.checkD=false;
$scope.xuan1=[];
$scope.xuan=function (xuan1,id) {
console.log(id);
$scope.checkD=xuan1;
if (xuan1){
$scope.xuan1.push(id);
}
}
});
<!-- 查询操作-->
myApp.controller("selectCtrl",function ($scope,$http) {
alert("111");
//https://free-api.heweather.com/v5/weather?city=%E7%A6%8F%E5%B7%9E&key=545d63e185fc48169a43cbabba6e74d2
var p1="https://free-api.heweather.com/v5/weather?city=";
var p2;
var p3="&key=545d63e185fc48169a43cbabba6e74d2";
$scope.city="beijing";
$scope.search=function () {
p2=$scope.city;
$http({
url:p1+p2+p3
}).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>
<center>
<!--总盒子 -->
<div class="div_main" style="width:1000px; height: 800px;">
<!--左盒子 -->
<div class="div_left" >
</div>
<!--中间盒子 -->
<div class="div_center">
<!--标题 -->
<div class="title">
<h2 style="padding-top: 10px">升班之旅</h2>
</div>
<!--内容 -->
<div class="main" >
<div class="main_left">
<ul>
<li><a href="#/shouye">首页</a></li>
<li><a href="#/news">新闻</a></li>
<li><a href="#/select">查询</a></li>
<li><a href="#/works">行程</a></li>
<li><a href="#/games">游戏</a></li>
</ul>
</div>
<div ng-view="" class="main_right">
</div>
</div>
</div>
<!--右盒子 -->
<div class="div_right"></div>
</div>
</center>
</body>
</html>
//new页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 100%;height: 700px;padding-top: 50px">
<div class="title">
<input type="text" ng-model="select" placeholder="请输入关键字...">
<span style="padding-left: 100px"></span>
<button style="background-color: crimson;color: white" ng-click="del()">批量删除</button>
</div>
<div class="main_shop">
<table border="1px solid" cellpadding="10">
<thead>
<th><input type="checkbox" ng-model="allCheck" ng-click="checkAll(allCheck)"></th>
</th>
<th ng-click="px('id')" ng-class="getClass('id')">
商品编号
</th>
<th ng-click="px('name')" ng-class="getClass('name')">
商品名称
</th>
<th ng-click="px('price')" ng-class="getClass('price')">
商品价格
</th>
<th ng-click="px('num')" ng-class="getClass('num')">
商品库存
</th>
<th>
数据操作
</th>
</thead>
<tbody>
<tr ng-repeat="item in item | filter:select | orderBy:orderName:order">
<td>
<input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)">
</td>
<td>
{{item.id}}
</td>
<td>
{{item.name}}
</td>
<td>
{{item.price | currency:("¥:")}}
</td>
<td>
{{item.num}}
</td>
<td>
<button ng-click="remove($index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
//select页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="margin-top: 50px">
城市:<input type="text" ng-model="city" placeholder="请输入城市">
<button ng-click="search()">查询</button>
<ul>
<li>{{cityName}}</li>
<li>{{date}}</li>
<li>{{temp}}</li>
</ul>
</div>
</body>
</html>