angularJs的灵活使用

最新推荐文章于 2024-07-26 08:00:00 发布

Charlie·

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量252

点赞数

本文链接：https://blog.csdn.net/Mydtudysy/article/details/78056103

版权

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;

        }
        li{
            list-style: none;
        }
        .color{
            color: red;
        }
        .clear1{
            content: '\200B';
            display: block;
            clear: both;

        }
        .clear{
            content: '\200B';
            display: block;
            clear: both;
            margin-top: 20px;
        }
        a{
            text-decoration: none;
            color: black;
        }
        header{
            width:100%;
            height: 100px;

            text-align: center;
            line-height: 100px;
        }
        .left{
            display: inline-block;
            margin-top: -40px;
        }
        .right{
            display: inline-block;
            float: right;
        }
        .id1{
            width: 15%;
            float: left;
        }
        .id1 li{
            border: 1px solid black;
            height: 50px;
            width: 120px;
            line-height: 50px;
            text-align: center;
            background: gold;
        }
        .inner{
            float: left;
            margin-left: 20px;
            width:80%;
        }
        .id2{
            float: left;
            margin: 10px;
        }
    </style>
    <script src="angular.min.js"></script>
    <script src="angular-route.js"></script>
    <script>
        var myapp = angular.module("myapp",["ngRoute"]);
        myapp.config(function ($routeProvider) {
            $routeProvider.when("/one",{
                templateUrl:"pages/one.html",
                controller:"oneCtrl"
            }).when("/two",{
                templateUrl:"pages/two.html",
                controller:"twoCtrl"
            }).when("/three",{
                templateUrl:"pages/three.html",
                controller:"threeCtrl"
            }).when("/richeng",{
                templateUrl:"pages/richeng.html",
                controller:"richengCtrl"
            }).when("/home",{
                templateUrl:"pages/home.html",
                controller:"homeCtrl"
            })
        })
        myapp.controller("oneCtrl",function ($scope) {
            $scope.date=[{
                id:'1235',name:'iphone',price:3400,num:10,check:false
            },{
                id:'425',name:'ipad',price:6400,num:500,check:false
            },{
                id:'235',name:'mini',price:2400,num:100,check:false
            },{
                id:'8635',name:'sumsung',price:100,num:1,check:false
            }]

            $scope.checkall=function () {
                for(var i=0;i<$scope.date.length;i++){
                    $scope.date[i].check=!$scope.date[i].check;
                }
            }

            $scope.delete=function (index) {
                var b = confirm("确定删除吗?");
                if(b){
                    $scope.date.splice(index,1);
                }

            }
            $scope.deleteall=function () {
                var a=confirm("确定要删除吗?");
                if(a){
                    for(var i=$scope.date.length-1;i>=0;i--){
                        if($scope.date[i].check==true){
                            $scope.date.splice(i,1);
                        }
                    }
                }
            }

            $scope.sort="name";
            $scope.reve=false;
            $scope.sortFun=function (column) {
                if($scope.sort==column){
                    $scope.reve=!$scope.reve;
                }
                $scope.sort=column;
            }

            $scope.class1=function (name) {
                if(name==$scope.sort){
                    return 'color';
                }
            }

            $scope.arr=[];
            var key1;
            $scope.addbuy=function (index) {

                    for(var i=0;i<$scope.date.length;i++){

                            if($scope.date[i].id==index){
                                if(key1==index){
                                    $scope.arr[$scope.arr.length-1].num++;
                                }else{
                                    $scope.arr.push({id:$scope.date[i].id,name:$scope.date[i].name,price:$scope.date[i].price,num:1});
                                }

                            }
                    }

                key1=index;
            }

            $scope.buycardel=function (index) {
                $scope.arr.splice(index,1);
            }

            $scope.allmoney=function () {
                $scope.money=0;
                for(var i=0;i<$scope.arr.length;i++){
                    $scope.money+=$scope.arr[i].price*$scope.arr[i].num;
                }
            }
            $scope.add1=function (index) {
                $scope.arr[index].num++;
            }
            $scope.jian1=function (index) {
                $scope.arr[index].num--;
            }

        })
        var u1="https://free-api.heweather.com/v5/weather?city=";
        var u2;
        var u3="&key=545d63e185fc48169a43cbabba6e74d2";
        myapp.controller("twoCtrl",function ($scope,$http) {
            $scope.city="beijing";
            $scope.ask=function () {
                u2=$scope.city;
                $http({
                    url:u1+u2+u3,
                }).then(function (data) {
                    $scope.cityname=data.data.HeWeather5[0].basic.city;
                    $scope.cityweather=data.data.HeWeather5[0].daily_forecast[0].cond.txt_d;
                    $scope.citywendu=data.data.HeWeather5[0].daily_forecast[0].hum;
                })

                $scope.city="";
            }

        })
        myapp.controller("threeCtrl",function ($scope) {
            $scope.cheke=function () {
                $scope.differ=$scope.guess-$scope.random;
                $scope.num++;
                $scope.guess="";
            }
            $scope.again=function () {
                $scope.num=0;
                $scope.random=Math.ceil(Math.random()*10);
                console.log($scope.random)
                $scope.differ=null;
                $scope.guess="";
            }
        })
        myapp.controller("richengCtrl",function ($scope) {
            $scope.arr=[{
                action:"爬山",done:false
            },{
                action:"会友",done:false
            },{
                action:"游泳",done:false
            },{
                action:"唱歌",done:false
            },{
                action:"喝酒",done:false
            },{
                action:"约会",done:false
            },{
                action:"休息",done:false
            }]

            $scope.addricheng=function () {
                $scope.arr.push({action:$scope.newaction,done:false})
                $scope.newaction="";
            }
            $scope.dones=[];
            $scope.del1=function (index) {
                $scope.dones.push({action:$scope.arr[index].action,done:true});
                $scope.arr.splice(index,1);
            }
        })

        myapp.controller("homeCtrl",function ($scope,$http) {
            $http({
                url:"package.json"
            }).then(function (data) {
                $scope.data=data.data;
            })
        })
    </script>
</head>
<body ng-app="myapp">
<header class="clear1">
    <h1 class="left">xx管理系统</h1>
</header>
<div class="clear">
    <ul class="id1">
        <li><a href="#home">首页</a></li>
        <li><a href="#one">第一页</a></li>
        <li><a href="#two">第二页</a></li>
        <li><a href="#three">第三页</a></li>
        <li><a href="#richeng">日程</a></li>
    </ul>
    <div ng-view="" class="inner"></div>
</div>

</body>

</html>

<h1>首页</h1>
<ul>
    <li ng-repeat="item in data" class="id2">
        <p>{{item.title}}</p>
        <img ng-src="{{item.img}}">
    </li>
</ul>

<input type="text" ng-model="search"><button ng-click="deleteall()">批量删除</button>
<table>
    <thead>
        <th><input type="checkbox" ng-click="checkall()"></th>
        <th ng-click="sortFun('id')" ng-class="class1('id')">商品编号</th>
        <th ng-click="sortFun('name')" ng-class="class1('name')">商品名称</th>
        <th ng-click="sortFun('price')" ng-class="class1('price')">商品价格</th>
        <th ng-click="sortFun('num')" ng-class="class1('num')">商品库存</th>
        <td>商品小计</td>
        <th>商品操作</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in date|filter:search|orderBy:sort:reve">
            <td><input type="checkbox" ng-model="item.check"></td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price|currency:'￥'}}</td>
            <td>{{item.num}}</td>
            <td>{{item.price*item.num}}</td>
            <td><button ng-click="delete($index)">删除</button><button ng-click="addbuy(item.id)">添加购物车</button></td>
        </tr>
    </tbody>
</table>
<h2>我的购物车</h2>
<table>
    <thead>
        <th>商品编号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>商品小计</th>
        <th>商品操作</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in arr">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td><button ng-click="add1($index)">+</button>{{item.num}}<button ng-click="jian1($index)">-</button></td>
            <td>{{item.price*item.num}}</td>
            <td><button ng-click="buycardel($index)">删除</button></td>
        </tr>
        <tr>
            <td><button ng-click="allmoney()">计算总金额</button></td>
            <td>{{money}}</td>
        </tr>
    </tbody>
</table>

<input type="text" ng-model="newaction"><button ng-click="addricheng()">添加日程</button>
<table>
    <thead>
        <th>序号</th>
        <th>日程</th>
        <th>完成情况</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in arr">
            <div ng-hide="item.done">
                <td>{{$index+1}}</td>
                <td>{{item.action}}</td>
                <td><input type="checkbox" ng-model="item.done" ng-click="del1($index)"></td>
            </div>
        </tr>
    </tbody>
</table>
<div>
    <h2>已完成项目</h2>
    <table>
        <thead>
        <th>序号</th>
        <th>日程</th>
        <th>完成情况</th>
        </thead>
        <tbody>
        <tr ng-repeat="item in dones">
            <td>{{$index+1}}</td>
            <td>{{item.action}}</td>
            <td><input type="checkbox" ng-model="item.done"></td>
        </tr>
        </tbody>
    </table>
</div>

<input type="text" ng-model="city"><button ng-click="ask()">点击查询</button>
<ul>
    <li>城市: {{cityname}}</li>
    <li>天气: {{cityweather}}</li>
    <li>温度: {{citywendu}}</li>
</ul>