初学angularJS实记

最新推荐文章于 2019-04-01 20:41:17 发布

初学者与求索

最新推荐文章于 2019-04-01 20:41:17 发布

阅读量222

点赞数

分类专栏： angularjs 文章标签：初学angular

angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

对angularJS的学习（1）

本人是个初学者，为了方便自己学习与回顾知识，所以利用微博记录一下自己的成长，如果有错误请不吝指教！！
以下是本人用angularJS编写一个简单的购物车。。。。

angularJS提供双向绑定的功能，相比于jq减少了很多的业务逻辑。以上是本人粗浅的见解。

代码部分

html5代码部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    </head>
    /*
    *定义一个模块
    *ng是angular默认的一个模块
    */
    <body ng-app="myapp">

        <div class="container" ng-controller="first">

            <table class="table"  ng-show="one.length"> 
                <thead>
                    <tr>
                        <th>
                            产品编号
                        </th>
                        <th>
                            产品名字
                        </th>
                        <th>
                            购买数量
                        </th>
                        <th>
                            产品单价
                        </th>
                        <th>
                            产品总价
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody>
                /*
                *angular式的循环“iteam in one”
                */
                    <tr ng-repeat="iteam in one">
                        <td>{{iteam.id}}</td>
                        <td>{{iteam.name}}</td>
                        <td>
                            <button type="button" ng-click="reduce(iteam.id)" class="btn btn-primary">-</button>
                            <input type="text" value="{{iteam.quantity}}" ng-model="iteam.quantity">
                            <button type="button" ng-click="add(iteam.id)" class="btn btn-primary">+</button>
                        </td>
                        <td>{{iteam.price}}</td>
                        <td>{{iteam.price*iteam.quantity}}</td>
                        <td> <button type="button" ng-click="remove(iteam.id)" class="btn btn-danger">移除</button></td>
                    </tr>
                    <tr>
                        <td colspan = '2' style="font-size: 15px;font-weight: 600;">商品总价格：<span style="color: red;">
                            {{totalPrice()}}</span>&nbsp;&nbsp;RMB</td>
                        <td colspan = '2' style="font-size: 15px;font-weight: 600;">商品总数：<span style="color: red;">
                            {{totalQuantity()}}</span></td>

                        <td ><button type="button" class="btn btn-danger" ng-click="one = {}">清空购物车</button></td>

                    </tr>
                </tbody>
            </table>
            <p ng-show="!one.length">你的购物车为空！！</p>
        </div>
    </body>
    <script type="text/javascript" src="js/angular.js" ></script>
    <script type="text/javascript" src="js/angular.min.js" ></script>
    <script type="text/javascript" src="js/first.js" ></script>
</html>

下面是js部分的代码：

绑定名为myapp的模块，并写死要显示的商品

var app = angular.module('myapp', []);

var onecontroller = app.controller('first',function($scope){
    $scope.one = [
        {
            id:1,
            name:'苹果',
            quantity:3,
            price:55
        },
        {
            id:2,
            name:'导弹',
            quantity:30,
            price:55000
        },
        {
            id:3,
            name:'笔记本',
            quantity:5,
            price:4300
        },
        {
            id:4,
            name:'神州5号',
            quantity:10,
            price:10000
        }

    ];

下面是计算商品总价格的js代码

    /*
     * 计算总价格
     */
    $scope.totalPrice = function(){
        var total = 0;
        angular.forEach($scope.one,function(iteam){
            total += iteam.quantity*iteam.price;
        })
        return total;
    }

统计商品总数


    $scope.totalQuantity = function(){
        var total = 0;
        angular.forEach($scope.one,function(iteam){
            total += parseInt(iteam.quantity);
        })
        return total;
    }

获取点击项的索引，写成一个可复用的方法

    /*
     * 找一个元素的索引
     */
    var indexAll = function(id){
        var index = -1;

        angular.forEach($scope.one,function(iteam,key){
            if(iteam.id===id){
                index=key;
            }
        });
        return index;
    }

实现添加数量与减少数量的JS代码


    $scope.add = function(id){
        var index = indexAll(id);

        if(index!==-1){
            ++$scope.one[index].quantity;
        }
    }

    $scope.reduce = function(id){
        var index = indexAll(id);

        if(index!==-1){
            var i = $scope.one[index];
            if(i.quantity>1){
                --$scope.one[index].quantity;
            }else{
                var d = confirm("确定从购物车删除该商品吗？");
                if(d){
                    $scope.remove(id);
                }
            }

        }

    }

清空购物车

    $scope.remove = function(id){
        var index = indexAll(id);
        if(index!==-1){
            $scope.one.splice(index,1);
        }

    }

    $scope.$watch('one',function(newValue,oldValue){

        angular.forEach(newValue,function(iteam,key){
            if(iteam.quantity<1){
                var d = confirm("确定从购物车删除该商品吗？");
                if(d){
                    $scope.remove(iteam.id);
                }else{
                    iteam.quantity = oldValue[key].quantity;
                }
            }
        })
    },true);
})

下面是成果图：
这里写图片描述

总结：虽然是跟着视频学习，但对于angularJS还是比较迷茫，对于其内部的具体实现，还并不了解，代码编写的也并不规范，以上要让自己慢慢改进

初学者与求索

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学angularJS实记

对angularJS的学习（1）本人是个初学者，为了方便自己学习与回顾知识，所以利用微博记录一下自己的成长，如果有错误请不吝指教！！以下是本人用angularJS编写一个简单的购物车。。。。 angularJS提供双向绑定的功能，相比于jq减少了很多的业务逻辑。以上是本人粗浅的见解。代码部分html5代码部分：<!DOCTYPE html><html> <head>
复制链接

扫一扫