小丸子

来源：互联网发布：手机淘宝怎么评论差评编辑：程序博客网时间：2024/04/26 10:53

index.html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        li{            list-style: none;        }        a{            text-decoration: none;            color: black;        }        .header{            background: pink;            width: 100%;            height: 200px;            text-align:center;            line-height: 200px;            color: white;            font-size: 36px;        }        .ul{            width: 120px;            float: left;        }        .ul li{            height: 30px;            border: 1px solid black;            line-height: 30px;            text-align: center;        }        .content{            width: 70%;            float: left;        }    </style>    <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>    <script>        var myapp=angular.module("myapp",["ngRoute"]);        myapp.config(function ($routeProvider) {            $routeProvider.when("/shouye",{                templateUrl:"pages/shouye.html",                controller:"shouyeCtrl"            }).when("/news",{                templateUrl:"pages/news.html",                controller:"newsCtrl"            }).when("/chaxun",{                templateUrl:"pages/chaxun.html",                controller:"chaxunCtrl"            }).when("/richeng",{                templateUrl:"pages/richeng.html",                controller:"richengCtrl"            }).otherwise({                redirectTo:"/news"            })        })        myapp.controller("shouyeCtrl",function ($scope,$http) {            $http({                url:"package.json"            }).then(function (data) {                $scope.data=data.data;            })        });        myapp.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.getClass=function (column) {                if($scope.orderName==column)                {                    if($scope.order==false)                    {                        return "top"                    }else{                        return "bot"                    }                }            }*/          $scope.shanchu=function (index) {/*删除单个*/              if(confirm("确定删除吗?"))              {                  $scope.items.splice(index,1);              }          }        });        myapp.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="";            };        })        myapp.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置空*/                    }                }            })            /*自定义过滤器*/            myapp.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">    <header class="header">        小后台    </header>  <div class="nav">      <ul class="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>      </ul>      <div ng-view="" class="content"></div>  </div></body></html>

package.json

[{    "id":1,    "img":"img/1.jpg",    "title":"小丸子1"  },{    "id":2,    "img":"img/2.jpg",    "title":"小丸子2"  },{    "id":3,    "img":"img/3.jpg",    "title":"小丸子3"  },{    "id":3,    "img":"img/3.jpg",    "title":"小丸子3"  },{    "id":4,    "img":"img/4.jpg",    "title":"小丸子4"  },{    "id":5,    "img":"img/5.jpg",    "title":"小丸子5"  },{    "id":6,    "img":"img/6.jpg",    "title":"小丸子6"  }]
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>

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>

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>
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>

阅读全文

0 0