AngularJs实现简单的购物车

来源：互联网发布：2016二级msoffice软件编辑：程序博客网时间：2024/06/09 12:57
要想使用angularjs 首先要下载angularjs的库
下载地址：https://angularjs.org/
新手可参考angularjs菜鸟教程
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="../css/bootstrap.css">    <script src="../js/angular-1.5.8.min.js"></script></head><body ng-app="myApp" ng-controller="myCon"><div class="container">    <h3 class="text-center">书籍价格表</h3>    <table class="table table-hover table-bordered text-center">        <tr>            <td colspan="2">                <input type="text" class="form-control" ng-model="search.$" placeholder="请输入搜索内容">            </td>            <td colspan="2">                <input type="text" class="form-control" ng-model="search.id" placeholder="请输入id">            </td>            <td colspan="2">                <input type="text" class="form-control" ng-model="search.name" placeholder="请输入name">            </td>        </tr>        <tr>            <!-- ng-class="{true:'dropdown',false:'con'}[flag]"-->            <th class="text-center" ng-class="{true:'dropup',false:'dropdown'}[flag]" ng-click="flag = !flag; getOrder('id',flag)">ID <span class="caret"></span></th>            <th class="text-center" ng-class="{true:'dropup',false:'dropdown'}[flag]" ng-click="flag = !flag; getOrder('name',flag)">名称<span class="caret"></span></th>            <th class="text-center" ng-class="{true:'dropup',false:'dropdown'}[flag]" ng-click="flag = !flag; getOrder('price',flag)">单价<span class="caret"></span></th>            <th class="text-center" ng-class="{true:'dropup',false:'dropdown'}[flag]" ng-click="flag = !flag; getOrder('count',flag)">数量<span class="caret"></span></th>            <th class="text-center" ng-class="{true:'dropup',false:'dropdown'}[flag]" ng-click="flag = !flag; getOrder('price*count',flag)">总价<span class="caret"></span></th>            <th class="text-center">操作</th>        </tr>        <tr ng-repeat="book in books  | filter : search track by $index">            <td>{{book.id}}</td>            <td>{{book.name}}</td>            <td>{{book.price}}</td>            <td>                <button class="btn btn-primary" ng-click="reduceCount($index)">-</button>                <input class="text-center" type="text" value="{{book.count}}">                <button class="btn btn-primary" ng-click="plusCount($index)">+</button>            </td>            <td>{{book.price * book.count}}</td>            <td><button class="btn btn-danger" ng-click="delItem($index)">删除</button></td>        </tr>        <tr>            <td>总数量</td>            <td>{{getSumCount()}}</td>            <td>总价钱</td>            <td>{{getSumPrice()}}</td>            <td><button class="btn btn-success" ng-click="myShow = !myShow">添加图书</button></td>            <td><button class="btn btn-danger" ng-click="delAll()">全部删除</button></td>        </tr>    </table>    <div ng-show="myShow">        <p class="form-group">            <label class="col-lg-2">id:</label>            <input type="text" ng-model="id" class="form-control col-lg-10">        </p>        <p class="form-group">            <label class="col-lg-2">name:</label>            <input type="text" ng-model="name" class="form-control col-lg-10">        </p>        <p class="form-group">            <label class="col-lg-2">price:</label>            <input type="text" ng-model="price" class="form-control col-lg-10">        </p>        <p class="form-group">            <label class="col-lg-2">count:</label>            <input type="text" ng-model="count" class="form-control col-lg-10">        </p>        <button style="margin-top: 15px" class="btn btn-success pull-right" ng-click="addItem()">确认增加</button>    </div></div></body><script>    angular.module("myApp",[])        .controller("myCon",["$scope","$filter",function ($s,$f) {            $s.books = [                {                    "id" : "01",                    "name" : "假如给我三天光明",                    "price" : 28,                    "count" : 10                },                {                    "id" : "02",                    "name" : "简爱",                    "price" : 35,                    "count" : 10                },                {                    "id" : "03",                    "name" : "汤姆索亚历险记",                    "price" : 35,                    "count" : 30                },                {                    "id" : "04",                    "name" : "归",                    "price" : 35,                    "count" : 40                }            ]//            $s.myFlag = false;            /*            * 得到总数量            * */            $s.getSumCount = function () {                var  sum = 0;                angular.forEach($s.books,function (item,key) {//                    console.log(item.count);                    sum = sum + item.count;                })                return sum;            }            /*            * 得到总价钱            * */            $s.getSumPrice = function () {                var price = 0;                angular.forEach($s.books,function (item,key) {                    price = price + item.price * item.count;                })                return price;            }            /*            * 删除行            * */            $s.delItem = function (index) {               if(confirm("您确定要删除此商品么？")){                   $s.books.splice(index,1);               }            }            /*            * 删除全部            * */            $s.delAll = function () {                if($s.books.length != 0){                    if(confirm("您确定要删除全部的商品么？")){                        $s.books.length = 0;                    }                }else{                    alert("没有可删除的商品了！");                }            }            /*            * 数量--            * */            $s.reduceCount = function (index) {                if($s.books[index].count <= 0){                    $s.books[index].count = 0;                }else{                    $s.books[index].count--;                }            }            /*            * s数量++            * */            $s.plusCount = function (index) {                $s.books[index].count++;            }            /*            * 增加一行            * */            $s.addItem = function () {                console.log($s.id);                console.log($s.name);                if ($s.id == "" || $s.name == "" || $s.price == "" || $s.count == ""){                    alert("请输入完整的信息！！");                }else{                    $s.books.push({"id":$s.id,"name":$s.name,"price":$s.price*1,"count":$s.count*1});                }                console.log($s.books);                $s.id = "";                $s.name = "";                $s.price = "";                $s.count = "";                $s.myShow = false;            }            $s.show = function () {                $s.id = "";                $s.name = "";                $s.price = "";                $s.count = "";            }            /*            * 排序            * */            $s.getOrder = function(val, flag) {                $s.books = $f("orderBy")($s.books, val, flag);            };        }])</script></html>
阅读全文
0 0