angularJS综合题

最新推荐文章于 2023-04-12 14:24:27 发布

zxx_fly

最新推荐文章于 2023-04-12 14:24:27 发布

阅读量467

点赞数

分类专栏：购物车，angular 文章标签： angularjs

本文链接：https://blog.csdn.net/zxx_fly/article/details/78051032

版权

购物车，angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、路由跳转及script页面：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>月考练习</title>
    <script src="../js/angular1.4.6.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .title {
            width: 100%;
            height: 50px;
            background: gold;
        }

        .h1 {
            text-align: center;
        }

        .nav {
            width: 15%;
            height: 800px;
            background: aqua;
            float: left;
        }

        .nav li {
            line-height: 100px;
            text-align: center;
            list-style: none;
        }

    </style>
    <script>
        var app = angular.module("myApp", ["ngRoute"]);

	路由切换

        app.config(function ($routeProvider) {
            $routeProvider
                    .when("/sy", {templateUrl: "ykShouye.html", controller: "syCrl"})
                    .when("/news", {templateUrl: "ykNews.html", controller: "newsController"})
                    .when("/select", {templateUrl: "ykChazhao.html", controller: "selectCrl"})
                    .when("/xc", {templateUrl: "ykXingcheng.html", controller: "xcCrl"})
                    .when("/game", {templateUrl: "ykGame.html", controller: "gameCrl"})
                    .otherwise({redirectTo: "/sy"});
        })

	猜数游戏

        app.controller("gameCrl",function($scope){
            $scope.check=function () {
                console.log($scope.random);
                $scope.differ=$scope.guess-$scope.random;
                $scope.guess=""
                $scope.num++;

            };
            $scope.reset=function () {
                $scope.differ=null;
                $scope.guess=null;
                $scope.num=0;
                $scope.random=Math.ceil(Math.random()*10);
            };
            $scope.reset();

        })

	添加数据

        app.controller("xcCrl",function($scope){
            $scope.xc=[
                {xcz:"去吃饭"},
                {xcz:"去吃饭"},
                {xcz:"去吃饭"},
                {xcz:"去吃饭"}
            ]
            $scope.add=function(){
                var a=$scope.zxc;
                $scope.xc.push({xcz:a})
                $scope.zxc=""
            }

        })

	查找操作，跨域拦截问题没有解决，无法获取数据

        app.controller("selectCrl", function ($scope, $http) {
            $scope.cz = function () {
                /*var url = "http://apicloud.mob.com/v1/weather/query?key=20d892115015a&city="+$scope.sea;*/
                var url="http://v.juhe.cn/weather/index?cityname="+$scope.sea+"&key=6dd2f629e6e5ac36cc4949266a55fe24"
                $http({
                    url:url
                }).then(function (data){
                    $scope.caza = JSON.stringify(data);
                })
                /*$http.get(url).success(function (data) {
                    $scope.caza = data;
                   /!* if (data.success) {
                        $scope.caza = JSON.stringify(data)
                    } else {
                        $scope.caza = "false"
                    }*!/
                })/!*.error(function (data) {
                    alert(JSON.stringify(data))
                })*!/*/
            }
        })

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

	购物车相关操作

        app.controller("newsController", function ($scope) {
            $scope.user = [
                {checked: false, id: "1324", name: "ipad", price: "34.00", num: "10", item: "0"},
                {checked: false, id: "4567", name: "aphone", price: "64.00", num: "100", item: "1"},
                {checked: false, id: "3546", name: "mypad", price: "44.00", num: "20", item: "2"},
                {checked: false, id: "1987", name: "zpad", price: "84.00", num: "120", item: "3"}
            ]
            $scope.allSum = function () {
                var allprice = 0;
                for (var i = 0; i < $scope.user.length; i++) {
                    allprice += $scope.user[i].price * $scope.user[i].num;
                }
                return allprice;
            }
            $scope.allNum=function(){
                var allnum=0;
                for(var i=0;i<$scope.user.length;i++){
                    allnum+=Number($scope.user[i].num);
                }
                return allnum;
            }
            $scope.nc = function (index) {
                if ($scope.user[index].checked == false) {
                    alert("请选中后删除");
                } else {
                    if (confirm("确认删除")) {
                        $scope.user.splice(index, 1)
                    }
                }
            }
            $scope.qs = function () {
                for (var i = 0; i < $scope.user.length; i++) {
                    if ($scope.user[i].checked == false) {
                        alert("请选中后删除");
                    } else {
                        if (confirm("确认全删")) {
                            $scope.user = [];
                        }
                    }
                }
            }
            $scope.selectAllClick = function (sa) {
                for (var i = 0; i < $scope.user.length; i++) {
                    $scope.user[i].checked = sa;
                }
            }
            $scope.echoChange = function (ck, index) {
                if (ck == false) {
                    $scope.user[index].checked = true;
                } else {
                    $scope.user[index].checked = false;
                }
            }
            $scope.togg = function (tit) {
                $scope.title = tit;
                $scope.desc = !$scope.desc;
            }
        });


    </script>
</head>
<body ng-app="myApp">
<div class="title">
    <h1 class="h1">标题</h1>
</div>
<div>
    <div class="nav">
        <ul>
            <li><a href="#sy">首页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#select">查询</a></li>
            <li><a href="#xc">行程</a></li>
            <li><a href="#game">游戏（猜大小）</a></li>
        </ul>
    </div>
    <div ng-view style="float: right;width: 85%;height: 800px">

    </div>
</div>
</body>
</html>

2、首页，$http请求数据

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
<style>
    ul{
        list-style: none;
        line-height: 50px;
    }
</style>
</head>
<body>
<ul>
    <li ng-repeat="i in data">
        <p>{{i.title}}</p>
        <img ng-src="{{i.img}}">
    </li>
</ul>
</body>
</html>

3、购物车页面，无法进行加减数据，可删除及排序，计价计数

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻页</title>

    <style>
        .d{
            width:100%;
            height: 50px;
            background: gainsboro;
        }
        td{
            background: white;
        }
    </style>
</head>

<div class="d">
    <input type="text"style="float: left;line-height: 30px" ng-model="serch">
    <button style="float: right;line-height: 30px" ng-click="qs()">批量删除</button>
</div>
<table style="width: 100%; height: 400px; background: gainsboro;margin-top: 40px" cellspacing="1px">
    <tr>
        <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"></td>
        <td ng-click="togg('id')">商品编号</td>
        <td ng-click="togg('name')">商品名称</td>
        <td ng-click="togg('price')">商品价格</td>
        <td ng-click="togg('num')">商品库存</td>
        <td>数据操作</td>
    </tr><!---->
    <tr ng-repeat="u in user|filter:serch|orderBy:title:desc">
        <td><input type="checkbox" ng-checked="u.checked"ng-click="echoChange(u.checked,$index)"></td>
        <td>{{u.id}}</td>
        <td>{{u.name}}</td>
        <td>￥：{{u.price}}</td>
        <td>{{u.num}}</td>
        <td><button ng-click="nc($index)">删除</button></td>
    </tr>
</table>
总价RMB ￥：<span ng-bind="allSum()"></span>  总数：<span ng-bind="allNum()"></span>
</body>
</html>

4、查询页面，因为跨域拦截问题无法获取接口数据

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询页</title>

</head>
<body>
<input ng-model="sea">
<button ng-click="cz()">查找</button>
<p>展示：</p>
<span ng-bind="caza"></span>
</body>
</html>
5、行程，可进行添加遍历数据

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行程页</title>

</head>
<body>
<input ng-model="zxc">
<button ng-click="add()">添加</button>
<ul style="list-style: none">
    <li ng-repeat="i in xc">{{i.xcz}}</li>
</ul>
</body>
</html>
6、游戏、进行猜数游戏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏页</title>

</head>
<body>
<h2>请输入一个1-10的整数</h2>
<input type="text" ng-model="guess"><button ng-click="check()">检查</button><button ng-click="reset()">重置</button>
<p ng-if="differ>0">猜大了</p>
<p ng-if="differ<0">猜小了</p>
<p ng-if="differ==0">猜对了</p>
<p>一共猜了<span ng-bind="num"></span>次</p>

</body>
</html>

zxx_fly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS综合题

1、路由跳转及script页面：html lang="en">head> meta charset="UTF-8"> title>月考练习title> script src="../js/angular1.4.6.min.js">script> script src="http://apps.bdimg.com/libs/angular-route/1.3
复制链接

扫一扫