AngularJS

最新推荐文章于 2023-10-28 12:42:37 发布

junkaili

最新推荐文章于 2023-10-28 12:42:37 发布

阅读量289

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/junkaili/article/details/78040922

版权

首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../day19/angular1.4.6.min.js"></script>
    <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>
      .head{width:100%;height: 800px;background: red}
        .head1{float: left;width:15%;height: 800px;background: yellow}
        .head2{float: right;width:85%;height: 800px;background: lawngreen}
        .head1 table {width:100%;height: 800px;}
         .head1 table tr{margin-left: 80px}
    </style>
</head>
<script>
    var myapp=angular.module("myapp",["ngRoute"]);
    myapp.config(function ($routeProvider) {

        $routeProvider.when("/shouye",{templateUrl:"shouye.html", controller:"shouyeCtrl"})
                .when("/xw",{templateUrl:"xw.html", controller:"xwCtrl"})
                .when("/chaxun",{templateUrl:"chaxun.html", controller:"chaxunCtrl"})
                .when("/xc",{templateUrl:"xc.html", controller:"xcCtrl"})
                .when("/yklx1",{templateUrl:"yklx1.html", controller:"ykCtrl"})
    })

    myapp.controller("ykCtrl",function ($scope) {
        $scope.check=function () {
            $scope.differ=$scope.guess-$scope.random;
            $scope.num++;
        }
        $scope.reset=function () {
            $scope.guess=null;
            $scope.differ=null;
            $scope.num=0;
            $scope.random=Math.ceil(Math.random()*10);
        }
        $scope.reset();
    })

    myapp.controller("shouyeCtrl",function ($scope,$http) {
        $http({
            url:"package.json"
        }).then(function (data) {
            $scope.data=data.data;
        })
    });

    myapp.controller("xwCtrl",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.remov = function (index) {
            $scope.items.splice(index, 3);
            return confirm("确认删除？");

        }
        $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("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("xcCtrl",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>
<body ng-app="myapp">
<div>
    <p style="margin-left: 300px">标题</p>
</div>

<div class="head">
    <div class="head1">
        <table border="1">
            <tr>
                <td><a href="#/shouye">首页</a></td>
            </tr>
            <tr>
                <td><a href="#/xw">新闻</a></td>
            </tr>
            <tr>
                <td><a href="#/chaxun"> 查询</a></td>
            </tr>
            <tr>
                <td><a href="#/xc">行程</a> </td>
            </tr>
            <tr>
                <td><a href="#/yklx1">游戏(猜大小)</a> </td>
            </tr>

        </table>
    </div>

    <div class="head2"  ng-view=""></div>
</div>
</body>
</html>