angular路由及小功能总结记录

最新推荐文章于 2024-04-14 10:39:14 发布

Strugglexia

最新推荐文章于 2024-04-14 10:39:14 发布

阅读量450

点赞数

分类专栏： angularjs相关文章文章标签： angular

本文链接：https://blog.csdn.net/qq_38395165/article/details/78459822

版权

angularjs相关文章专栏收录该内容

4 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--引入两个文件，一个是angular一个是路由-->
    <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>
    <style>
        *{padding:0;margin:0;}
        li{list-style: none;}
        ul.indeBox{list-style: none;font-size:0px;position:fixed;left:0px;right:0;bottom:0;}
        ul.indeBox li{box-sizing:border-box;display:inline-block;width:25%;font-size:14px;text-align:center;height:40px;line-height:40px;background:#dfdfdf;}
        a{text-decoration: none;}
    </style>
</head>
<body>
    <div ng-view></div>
    <ul class="indeBox">
        <li>
            <a href="#/home">首页</a>
        </li>
        <li>
            <a href="#/getText">随写</a>
        </li>
        <li>
            <a href="#/card">随记</a>
        </li>y
        <li>
            <a href="#/my">我的</a>
        </li>
    </ul>
    <script src="./js/app.js"></script>
    <script src="./js/filters.js"></script>
    <script src="./js/controllers.js"></script>
</body>
</html>

app.js

//app.js作为文件的接口文件,用来控制页面之间的跳转
var app=angular.module('myApp',['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
    $routeProvider
        .when('/',{
            templateUrl:'./views/home.html',
            controller:'homeCtrl'
        })
        .when('/home',{
            templateUrl:'./views/home.html',
            controller:'homeCtrl'
        })
        .when('/getText',{
            templateUrl:'./views/getText.html',
            controller:'getTextCtrl'
        })
        .when('/card',{
            templateUrl:'./views/card.html',
            controller:'cardCtrl'
        })
        .when('/my',{
            templateUrl:'./views/my.html',
            controller:'myCtrl'
        })
        .otherwise({redirectTo:'/'});

}]);

controller.js

//所有页面的控制器
app.controller('homeCtrl',function($scope){
    /*搜索切换*/
    $scope.advanceSea=false;
    $scope.data={
        current:"1"
    },
        $scope.changeCur=function(id){
            $scope.data.current = id;
            $scope.homeText="我的tab01";
            if(id == 1){
                $scope.advanceSea=false;
                $scope.homeText="我的tab01";
            }else if( id == 2){
                $scope.advanceSea=true;
                $scope.homeText="我的tab02";
            }else if( id == 3){
                $scope.advanceSea=true;
                $scope.homeText="我的tab03";
            }
        }
})
    .controller('getTextCtrl',function($scope){
        $scope.tags=[
            {name:'大白',code:'0001'},
            {name:'大花',code:'0002'},
            {name:'大树',code:"0003"}];
        $scope.onSelect=function(tag){
            var aa=tag.name;
            if(aa == '大白'){
                alert("获取值为大白");
            }else if( aa == '大花'){
                alert('获取值为大花');
            }else if( aa == '大树'){
                alert('获取值为大树');
            }
        }

    })
    .controller('cardCtrl',function($scope){
        $scope.names=[
            {name:'xm',country:'China'},
            {name:'tcmeiguo',country:'American'},
            {name:'tcguoj',country:'FBmerican'},
            {name:'xmycguo',country:'YCmerican'},
            {name:'bdguo',country:'Dmerican'},
            {name:'qhguoj',country:'Emerican'}
        ]
    })


    .controller('myCtrl',function($scope){
    $scope.productList=[
        {id:01,name:"iphone5",quantity:1,price:1800},
        {id:02,name:"iphone5s",quantity:1,price:2000},
        {id:03,name:"iphone6",quantity:1,price:3500},
        {id:04,name:"iphone6s",quantity:1,price:3800},
        {id:05,name:"iphone7",quantity:1,price:5500},
    ];
    //减少数量
    $scope.reduce=function(index){
        if($scope.productList[index].quantity > 1){ /*默认数量都是1*/
            $scope.productList[index].quantity --;
        }else{
            $scope.remove(index);
        }
    };
    //添加数量函数
    $scope.add=function(index){
        $scope.productList[index].quantity++;
    };
    //所有商品总价函数
    $scope.totalQuantity=function(){
        var allPrice = 0;
        for(var i=0;i < $scope.productList.length; i++){
            allPrice+= $scope.productList[i].quantity * $scope.productList[i].price;
        }
        return allPrice;
    };
    //购买总数量函数
    $scope.numAll = function(){
        var numAlls = 0;
        for(var i = 0; i<$scope.productList.length; i++){
            numAlls += $scope.productList[i].quantity;
        }
        return numAlls;
    };
    //删除当前商品
    $scope.remove=function(index){
        if(confirm("确定要删除数据？")){
            $scope.productList.splice(index,1)
        }
    };
    //清空购物车
    $scope.removeAll=function(){
        if(confirm("你确定要清空购物车所有的商品吗？")){
            $scope.productList=[];
        }
    };
    //解决输入框输入负数时变为1
    $scope.change=function(index){
        if($scope.productList[index].quantity >= 1) {
        }else{
            $scope.productList[index].quantity = 1;
        }
    };
    $scope.$watch('productList',function(oldvalue,newvalue){
        console.log(oldvalue);
        console.log(newvalue);
    })
})

home.html

    <style type="text/css">
        *{padding:0;margin:0;}
        li{list-style: none;}
        section{width: 100%;height: auto;float: left;}
        .banner{width: 100%;height: 550px;background:url("img/banner.jpg") no-repeat;float: left;overflow:hidden;}
        .banner h2{text-align: center;color: #fff;margin:120px 0 65px;font-weight: 100;}
        .banner nav{width: 715px;height: 165px;margin:0 auto;}
        .banner nav ul{width: 100%;float:left;margin-bottom:0px;}
        .banner nav ul li{float: left;}
        .banner nav ul li:nth-child(2){margin:0px 5px;}
        .banner nav ul li a{display: inline-block;width:235px;height: 45px;line-height: 45px;color: #333;font-size: 16px;text-align: center;background: #DFE1E4;border-top-left-radius: 5px;border-top-right-radius: 5px; }
        .banner nav ul li a.current{background-color:#fff;color:#0471D6;text-decoration: none; }
        .banner nav .dropdown{width: 100%;height: 135px;background: #fff;float: left;padding:40px 25px;}
        .banner nav .dropdown .searchCont{width: 100%;height: 44px;border:1px solid #C5C5C5;}
        .banner nav .dropdown .searchCont input[type="text"]{width: 561px;height: 40px;float: left;border:none;padding-left: 15px;outline: none;}
        .banner nav .dropdown .searchCont input[type="submit"]{width: 100px;height: 40px;float: left;background-color:#0471D6;float: left;border:none;margin-top: 1px;color: 14px;color: #fff; }
        .banner nav .dropdown a{float: right;color:#0471D6;margin-top: 15px;}
        .parallax {
            background-attachment: fixed !important;
            background-repeat: no-repeat !important;
        } /*设置背景固定定位*/
    </style>
<section>
    <div class="banner parallax">
        <h2></h2>
        <nav>
            <ul class="drop">
                <li>
                    <a ng-class="{'current' :data.current == 1}" ng-click="changeCur(1)">我的tab01</a>
                </li>
                <li>
                    <a ng-class="{'current' :data.current == 2}" ng-click="changeCur(2)">我的tab02</a>
                </li>
                <li>
                    <a ng-class="{'current':data.current == 3}" ng-click="changeCur(3)">我的tab03</a>
                </li>
            </ul>
            <div class="dropdown">
                <div class="searchCont">
                    <input type="text" placeholder="请输入{{homeText}}">
                    <input type="submit" value="搜索">
                </div>
                <a ng-hide="advanceSea">高级搜索</a>
            </div>
        </nav>
    </div>
</section>

getText.html

<style>
    ul.getBox{width:500px;height:400px;margin:50px;border:1px solid deeppink;padding:50px 100px;}
    ul.getBox span{font-size:18px;color:red;}
</style>

<ul class="getBox">
    <li ng-repeat="tag in tags">
        <span ng-click="onSelect(tag)">{{tag.name}}</span>
    </li>
</ul>

card.html

<style>
    .cardBox{width:500px;height:500px;padding:40px;}
    .cardBox input[type="text"]{width:100px;height:30px;border-radius:5px;text-align: center;margin-bottom:10px;}
    .carBox p{color:#333;margin-bottom:15px;font-size:14px;}
</style>
<div class="cardBox">
    <p>
        <input type="text" ng-model="test">
    </p>
    <div>
        <p ng-repeat="x in names | filter:test | orderBy:'country'">
            名字和国家: {{x.name +" , "+ x.country}}
        </p>
    </div>
</div>

my.html

    <style type="text/css">
        .num{text-align: center;width: 60px;}
        span{margin-right: 10px;}
    </style>
<!--ng-bind是从$scope -> view的单向绑定ng-modle是$scope <-> view的双向绑定
{{}} 与 ng-bind 的区别是后者在加载时用户不会看到渲染之前的东西,前者可能会看到,所以首页一般用后者加载数据
-->

<div>
    <table class="table table-striped">
        <tr>
            <th>产品编号</th>
            <th>产品名称</th>
            <th>购买数量</th>
            <th>产品单价</th>
            <th>产品总价</th>
            <th>操作</th>
        </tr>
        <tr ng-repeat="xxx in productList">
            <td>{{xxx.id}}</td>
            <td>{{xxx.name}}</td>
            <td>
                <button class="btn btn-default" ng-click="reduce($index)"> - </button>
                <input type="text" class="num " ng-model="xxx.quantity" ng-change="change($index)"/>
                <button class="btn btn-default" ng-click="add($index)"> + </button>

            </td>
            <td>{{xxx.price}}</td>
            <td>{{xxx.price * xxx.quantity}}</td>
            <td>
                <button class="btn btn-success" ng-click="remove($index)">移除</button>
            </td>
        </tr>
    </table>
    <div id="foot">
        <span>总价:</span>
        <span ng-bind="totalQuantity()"></span>
        <span>购买数量</span>
        <span>{{numAll()}}</span>
        <button ng-click="removeAll()" class="btn btn-success">清空购物车</button>
    </div>
</div>

Strugglexia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular路由及小功能总结记录

index.htmlhtml>ng-app="myApp"> charset="UTF-8"> Document rel="stylesheet" href="css/bootstrap.css"> 引入两个文件，一个是angular一个是路由--> src="http://apps.bdimg.com/libs/angular.js/1.4.6
复制链接

扫一扫

专栏目录