angularjs的加减数量,确认删除

最新推荐文章于 2020-02-14 17:07:52 发布

原创最新推荐文章于 2020-02-14 17:07:52 发布 · 725 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的简易购物车应用案例，通过HTML和AngularJS代码展示了如何进行商品增删、数量修改及全选反选等功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--样式-->
    <style>
th,td{
    width: 80px;
    height: 40px;
    border: 1px solid #69717d;
}
        table{
            border-collapse: collapse;
            margin-top: 6px;
        }
        /*可以给数量的输入框设置宽高*/
        .inputlen{
            width: 50px;
            height: 10px;
        }
    </style>
    <!--导入angularjs包-->
    <script src="angular-1.5.5/angular.min.js"></script>
    <script>
        /*声明模块*/
        var myapp=angular.module("myapp",[]);
        /*为模块添加控制器*/
        myapp.controller("myCtrl",function ($scope) {
            /*创建数组*/
            $scope.items=[
                {
                    done:false,
                    "name":"铅笔",
                    "price":2,
                    "count":1
                },
                {
                    done:false,
                    "name":"彩笔",
                    "price":4,
                    "count":2
                },
                {
                    done:false,
                    "name":"毛笔",
                    "price":6,
                    "count":3
                }
            ]
            /*清空购物车*/
            $scope.qk=function () {
                $scope.items.length=0;
            }
            /*+*/
            $scope.jia=function (index) {
                $scope.items[index].count++;
            }
            /*-*/
            $scope.jian=function (index) {
                $scope.items[index].count--;
                /*判断减到>=0*/
                if($scope.items[index].count<=0){
                    $scope.items[index].count=0;
                }
            }
            /*确认删除的方法，注意传值*/
            $scope.del=function (index) {
                if (confirm("确认删除吗？") == true) {
                    $scope.items.splice(index, 1);
                }
            }
            /*全选*/
            $scope.checkall=function () {
                if ($scope.check1 == true) {
                    for (var i = 0; i < $scope.items.length; i++) {
                        $scope.items[i].done = true;
                    }
                }
                else {
                    for (var i = 0; i < $scope.items.length; i++) {
                        $scope.items[i].done = false;
                    }
                }
            }
            /*反选*/
            var n=0;
            $scope.fx=function (index) {
                if($scope.items[index].done==true){
                    n++;
                }else{
                    n--;
                }
                if(n==$scope.items.length){
                    $scope.check1=true;
                }else {
                    $scope.check1=false;
                }
            }
        })
    </script>
</head>
<!--ng-app="myapp",ng-controller="myCtrl"-->
<body ng-app="myapp" ng-controller="myCtrl">
<h1>我的购物车</h1>
<!--清空购物车点击事件-->
<button ng-click="qk()">清空购物车</button>
<table>
    <tr>
        <!--全选点击事件，注意绑定：ng-model="check1"->全选是否勾选-->
        <th><input type="checkbox" ng-click="checkall()" ng-model="check1"></th>
        <th>商品名</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
    </tr>

    <tr ng-repeat="item in items">
        <!--注意遍历:ng-model="item.done",反选点击事件-->
        <th><input type="checkbox" ng-model="item.done" ng-click="fx($index)"></th>
        <th>{{item.name}}</th>
        <th>{{item.price}}</th>
        <!--+,-,点击事件-->
        <th><span ng-click="jia($index)">+</span><input type="text" ng-model="item.count" class="inputlen"><span ng-click="jian($index)">-</span></th>
        <th>{{item.price*item.count}}</th>
        <!--删除点击事件，注意传值-->
        <th><button ng-click="del($index)">删除</button></th>
    </tr>
</table>
</body>
</html>