angularjs的优化反选

最新推荐文章于 2024-04-09 15:50:58 发布

love_mysunshine

最新推荐文章于 2024-04-09 15:50:58 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/love_mysunshine/article/details/78349119

本文介绍了一个使用Angular实现的简易购物车应用案例。该应用通过Angular框架进行开发，实现了商品选择、数量增减、全选、反选及删除等功能，并计算了所选商品的总价。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--样式-->
    <style>
        th,td{
            width: 60px;
            height: 40px;
            border: 1px solid #69717d;
        }
        table{
            border-collapse: collapse;
            margin-top: 6px;
        }
        .inputlen{
            width: 30px;
            height: 10px;
        }
    </style>
    <!--导包-->
    <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,
                    number:1
                },
                {
                    done:false,
                    name:"钢笔",
                    price:4,
                    number:2
                },
                {
                    done:false,
                    name:"本子",
                    price:6,
                    number:3
                }
            ]
            /*+*/
            $scope.jia=function (index) {
                $scope.items[index].number++;
            }
            /*-*/
            $scope.jian=function (index) {
                $scope.items[index].number--;
                /*判断减到>=0*/
                if($scope.items[index].number<=0){
                    $scope.items[index].number=0;
                }
            }
            /*全选*/
            $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;
                    }
                }
            }
            /*反选*/
            $scope.fx=function () {
                var n=0;
                for(var i=0;i<$scope.items.length;i++){
                    if($scope.items[i].done==true){
                        n++;
                    }
                }
                if(n==$scope.items.length){
                    $scope.check1=true;
                }else {
                    $scope.check1=false;
                }
            }
            /*删除*/
          /*  $scope.del=function ($index) {
                $scope.items.splice($index,1);
            }*/
            $scope.del=function (index) {
                if (confirm("您是否确认将该商品移除购物车？") == true) {
                    $scope.items.splice(index, 1);
                }
               /* if( $scope.items.length=0){
                    alert("您的购物车为空，请逛商城")
                }*/
            }
            /*总价*/
            $scope.money=function () {
                var m=0;
                for(var i=0;i<$scope.items.length;i++){
                    if($scope.items[i].done==true){
                        m+=$scope.items[i].price*$scope.items[i].number;
                    }
                }
                return m;
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<hx2>我的购物车</hx2>
<table>
    <tr>
        <th><input type="checkbox" ng-click="checkall()" ng-model="check1"></th>
        <th>name</th>
        <th>price</th>
        <th>number</th>
        <th>tobalprice</th>
        <th>option</th>
    </tr>

    <tr ng-repeat="item in items">
        <td><input type="checkbox" ng-model="item.done" ng-click="fx()"></td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td><span ng-click="jia($index)">+</span><input type="text" ng-model="item.number" class="inputlen"><span ng-click="jian($index)">-</span></td>
        <td>{{item.price*item.number}}</td>
        <td><button ng-click="del($index)">删除</button></td>
    </tr>
</table>
<div>
    总价为：<span>{{money()}}</span>
</div>
</body>
</html>