练习购物车

最新推荐文章于 2023-05-22 11:56:00 发布

xupeng1986

最新推荐文章于 2023-05-22 11:56:00 发布

359

分类专栏： AngularJS学习笔记文章标签： naApp angularjs bootstrap

本文链接：https://blog.csdn.net/xupeng1986/article/details/41266473

版权

AngularJS学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

先去下载Bootstrap；下载好bootstrap3文件后，把里面的css，fonts，js三个文件copy进vendor下新建的bootstrap3文件夹

在<head>

<link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.min.css">

/head>

先把简单的架构搭起来：

要想使用bootstrap，首先在body里面加入“ ng-app="" ”。

Angular关于ng-app的解释：

Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or<html> tags.

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

You can specify an AngularJS module to be used as the root module for the application. This module will be loaded into the $injectorwhen the application is bootstrapped and should contain the application code needed or have dependencies on other modules that will contain the code. See angular.module for more information.

In the example below if the ngApp directive were not placed on the html element then the document would not be compiled, theAppController would not be instantiated and the {{ a+b }} would not be resolved to 3.

ngApp is the easiest, and most common, way to bootstrap an application.

<html>

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.min.css">

<body ng-app="">

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

        <table class="table">

            <thead>

                <tr>

                    <th>产品编号</th>

                    <th>产品名字</th>

                    <th>购买数量</th>

                    <th>产品单价</th>

                    <th>产品总价</th>

                    <th>操作</th>

                </tr>

            </thead>

            <tbody>

//用循环遍历的方式（ng-repeat="item in cart"），将JS里面的值放进对应的table。

                <tr ng-repeat="item in cart">

                    <td>{{item.id}}</td>

                    <td>{{item.name}}</td>

                    <td>{{item.quantity}}</td>

                    <td>{{item.price}}</td>

                    <td>{{item.price * item.quantity}}</td>

                    <td>

		//在bootstrap的官网中的CSS里找到想要的button

                       <button type="button" class="btn btn-danger">移除</button>

                    </td>

                </tr>

<tr>

    <td>

        总购买价

    </td>

    <td>

        {{totalPrice()}}

    </td>

    <td>

        总购买数量

    </td>

    <td>

        {{totalQuantity()}}

    </td>

    <td colspan="2">

        <button type="button" class="btn btn-danger">清空购物车</button>

    </td>

            </tbody>

        </table>

    </div>

    <script type="text/javascript" src="app/index.js"></script>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>

</body>

</html>

JS页面：

var cartController = function($scope){
    $scope.cart = [
        {
            id:1000,
            name: 'iPhone5s',
            quantity:'3',
            price:4300
        },
        {
            id:3300,
            name: 'iPhone5',
            quantity:'30',
            price:3300
        },
        {
            id:232,
            name: 'iMac',
            quantity:'4',
            price:23000
        },
        {
            id:1000,
            name: 'iPad',
            quantity:'5',
            price:6900
        }
    ];

//计算出产品的总数量和总价

/**

*  用forEach遍历出属性并加以操作

* angular.forEach($scope.cart,function(item){
*       ...;
*    })

**/

	$scope.totalPrice = function(){
    var total= 0;
    angular.forEach($scope.cart,function(item){
        total += item.quantity * item.price;
    })
    return total;
}

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