// 主页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0 auto; } #nav { align-self: center; background-color: #ff22ff; border: 1px solid gainsboro; border-radius: 5px; width: 1450px; height: 50px; line-height: 50px; margin-bottom: 10px; width: 1000px; } span { text-align: center; } #left { float: left; width: 200px; height: 620px; } #right { float: right; width: 800px; height: 620px; background-color: #22ffff; } ul li { list-style-type: none; } ul li a { margin-top: 12px; display: block; width: 100px; height: 100px; background-color: #22ff22; text-decoration: none; line-height: 100px; text-align: center; border: 3px azure solid; border-radius: 5px; } </style> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> <script> var app = angular.module('myApp', ['ngRoute']); app.config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'pages/shouye.html', controller: "shouyeCtrl" }) .when('/news', { templateUrl: 'pages/news.html', controller: "newsCtrl" }) .when('/select', { templateUrl: 'pages/chaxun.html', controller: "chaxunCtrl" }) .when('/trip', {templateUrl: 'pages/richeng.html', controller: "richengCtrl" }) .when('/games', {templateUrl: 'pages/news.html'}) .otherwise({redirectTo: '/'}); }); app.controller("shouyeCtrl", function ($scope, $http) { $http({ url: "package.json" }).then(function (data) { $scope.data = data.data; }) }); app.controller("newsCtrl", function ($scope) { $scope.items = [ {bianhao: 1234, name: "ipad", price: 3400, kucun: 10, check: false}, {bianhao: 1244, name: "aphone", price: 6400, kucun: 100, check: false}, {bianhao: 1334, name: "mypad", price: 4400, kucun: 20, check: false}, {bianhao: 8234, name: "zpad", price: 8400, kucun: 130, check: false}, ] /*排序*/ $scope.orderName = "bianhao"; $scope.order = false; $scope.paixu = function (column) { if ($scope.orderName == column) { $scope.order = !$scope.order; } else { $scope.order = false; } $scope.orderName = column; }; $scope.shanchu = function (index) {/*删除单个*/ if (confirm("确定删除吗?")) { $scope.items.splice(index, 1); } } }); app.controller("chaxunCtrl", function ($scope, $http) { var u1 = "https://free-api.heweather.com/v5/weather?city="; var u2; var u3 = "&key=545d63e185fc48169a43cbabba6e74d2"; $scope.city = "beijing"; $scope.show = false; $scope.search = 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 = ""; }; })
app.controller("richengCtrl", function ($scope) { var data = { user: "李四", items: [ {action: "约刘诗诗吃饭", done: false}, {action: "约刘诗诗跳舞", done: false}, {action: "约刘诗诗敲代码", done: true}, {action: "约刘诗诗爬长城", done: false}, {action: "约刘诗诗逛天坛", done: false}, {action: "约刘诗诗看电影", done: false} ] }; $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 () { if ($scope.action)/*对$scope.action进行下一个非空判断*/ { /*如果输入了内容*之后,就在数组的最后加入一条新内容*/ $scope.data.items.push({"action": $scope.action, "done": false}); $scope.action = ""; /*添加完成之后,将input置空*/ } } }) /*自定义过滤器*/ 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"> <div style="background-color: antiquewhite; width: 1000px; height: 700px;"> <div id="nav"> <span><h2>标题</h2></span> </div> <div id="left"> <ul> <li><a href="#/">首页</a></li> <li><a href="#/news">新闻</a></li> <li><a href="#/select">查询</a></li> <li><a href="#/trip">日常</a></li> <li><a href="#/games">游戏(猜大小)</a></li> </ul> </div> <div id="right"> <div ng-view></div> </div> </div> </body> </html>
---------> pages/shouye.html
<style> .ul2 li{ float: left; margin-left: 15px; } </style> <ul class="ul2"> <li ng-repeat="item in data"> <p>{{item.title}}</p> <img ng-src="{{item.img}}"> </li> </ul>
-----------> pages/ news.html
<style> table{ border-collapse: collapse; margin-top: 20px; } input{ margin-top: 10px; } th{ border: 1px solid black; padding: 30px; } td{ border: 1px solid black; padding: 30px; } .pi{ border: 1px solid red; background: red; color: white; } .shan{ background: orange; border: 1px solid orange; color: white; } .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> <div style="margin-left: 30px"> <input type="text" placeholder="输入关键字.." ng-model="search"> <button class="pi" ng-click="delteAll()">批量删除</button> <table> <thead> <tr> <th><input type="checkbox" ng-model="allCheck" ng-click="checkAll()"></th> <th ng-click="paixu('bianhao')" ng-class="getClass('bianhao')">商品编号</th> <th ng-click="paixu('name')" ng-class="getClass('name')">商品名称</th> <th ng-click="paixu('price')" ng-class="getClass('price')">商品价格</th> <th ng-click="paixu('kucun')" ng-class="getClass('kucun')">商品库存</th> <th>数据操作</th> </tr> </thead> <tbody> <tr ng-repeat="item in items|filter:search|orderBy:orderName:order"> <td><input type="checkbox" ng-model="item.check" ng-click="itemCheck()"></td> <td>{{item.bianhao}}</td> <td>{{item.name}}</td> <td>{{item.price|currency:"¥:"}}</td> <td>{{item.kucun}}</td> <td><button class="shan" ng-click="shanchu($index)">删除</button></td> </tr> </tbody> </table> </div>
-----------> pages/ chaxun.html
<input type="text" ng-model="city"> <button ng-click="search()">点击查询</button> <ul ng-show="show"> <li>{{cityName}}</li> <li>{{date}}</li> <li>{{temp}}</li> </ul>
---------> pages/richeng.html
<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>