angular js 查询 + 表单+日程

最新推荐文章于 2022-04-25 11:29:34 发布

w苏

最新推荐文章于 2022-04-25 11:29:34 发布

阅读量496

点赞数

本文链接：https://blog.csdn.net/qq_40152180/article/details/78040779

版权

//路由

<!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="angular1.4.6.min.js"></script>
    <script src="angular-route.js"></script>
    <script>
        var myapp=angular.module("myapp",["ngRoute"]);
        myapp.config(function ($routeProvider) {
            console.log($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) {
                    console.log(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>

//首页布局 shouye

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

//表单
<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>

//天气查询

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

//日程

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

w苏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular js 查询 + 表单+日程

//路由html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> li{ list-style: none; } a{ text-decoration: none;
复制链接

扫一扫