Angular js 增删改查

最新推荐文章于 2025-03-04 16:43:26 发布

原创最新推荐文章于 2025-03-04 16:43:26 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用Angular开发的购物车应用程序。该应用实现了商品增删、数量调整、总价计算等功能，并通过样式区分了不同的行。文章详细展示了如何利用Angular框架进行前端开发。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
   tbody tr:nth-child(odd){
    background-color: aqua;
   }
   tbody tr:nth-child(even){
    background-color:deeppink;
   }
  </style>
  <script type="text/javascript" src="js/angular.js" ></script>
  <script>
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope,$http){
    $http.get("js/proo.json")
     .success(function(aa){
      $scope.message = aa;
     })

     //删除
     $scope.sc = function(){
      for(var i=0;i<$scope.message.length;i++){
       if($scope.message[i].xz){
        $scope.message.splice(i,1);
        i--;
       }
      }
     }

     //清空购物车
     $scope.qk = function(){
      $scope.message.splice(0,$scope.message.length);
     }

     //商品总数
      $scope.sum = function(){
                       count = 0;
                        for(var i in $scope.message){
                         count=count+$scope.message[i].gnum;
                         }
                        return count;
                    }
      //商品总价
      $scope.snum = function(){
                       count = 0;
                        for(var i in $scope.message){
                         count = count+$scope.message[i].gnum*$scope.message[i].gprice;
                         }
                        return count;
                    }

     //商品数量的加减
     $scope.count = function(num,sname){
      for(var i=0;i<$scope.message.length;i++){
       if($scope.message[i].gname == sname){
          if($scope.message[i].gnum == 1 && num == -1 ){
          var f = confirm("确认删除吗？")
          if(f){
            $scope.message.splice(i,1);
          }
          }
          else{
                $scope.message[i].gnum =
                 $scope.message[i].gnum+num;

          }
          }
       }
      }
   });
  </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <center>
  <h1 style="background-color: aquamarine;">我的购物车详情</h1>
  <input type="text" placeholder="根据名称查询" style="border-radius: 10px;background-color: yellow; margin-left: 300px;" ng-model="cx" /><br /><br />
  <table border="1" style="background-color: darkgrey;" align="center">
    <thead>
   <tr align="center">
    <td ng-click="px='+gid'">商品编号</td>
    <td>商品名称</td>
    <td>商品数量</td>
    <td>商品单价</td>
    <td ng-click="px='-gcount'">价格小计</td>
    <td>操作</td>
   </tr>
    </thead>
    <tbody>
    <tr ng-repeat="s in message | filter:{gname:cx} |orderBy:px" align="center">
      <td>{{s.gid}}</td>
      <td>{{s.gname}}</td>
      <td>
       <button ng-click="count(+1,s.gname)">+</button>
       <input style="width: 30px;" ng-model="s.gnum" />
       <button ng-click="count(-1,s.gname)">-</button>
      </td>
      <td>{{s.gprice}}</td>
      <td>{{s.gnum*s.gprice}}</td>
      <td><input type="checkbox" ng-model="s.xz" /></td>
    </tr>
    </tbody>
  </table><br />
  <button style="background-color: green; margin-right: 45px; margin-left: 45px;">商品总数{{sum()}}</button>
  <button style="background-color: green; margin-right: 45px;">商品总价{{snum()}}</button>
  <button style="background-color: yellow; margin-right: 45px;" ng-click="qk()" ng-model="del">清空购物车</button>
  <button style="background-color: yellow; margin-right: 45px;" ng-click="sc()" ng-model="ss">删除</button>
  </center>
</body>
</html>