AngularJS应用实例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40312617/article/details/78049370

// 主页

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