使用Angular创建数据的增删改查

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

原创

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

0 ·

CC 4.0 BY-SA版权

这个示例展示了如何在Angular应用中管理购物车数据，包括商品的增删改查功能。用户可以按商品编号正序或逆序排列，按价格小计正序或逆序排列，以及通过输入框调整商品数量，实现总价和总数量的实时更新。同时提供了清空购物车和删除商品的功能。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   /*展示数据每行变色*/

   .css1 {
    background-color: #00ff99;
   }

   .css2 {
    background-color: #ff3399;
   }
  </style>
  <script src="../libs/angular.js"></script>
  <script src="../libs/jquery-1.11.0.min.js"></script>
  <script>
   var App = angular.module("myApp", []);
   App.controller("myCtrl", function($scope) {
    $scope.shops = [{
     gid: 001,
     gname: "手机",
     gnum: 3,
     gprice: 1000,
     gcount: 3000
    }, {
     gid: 002,
     gname: "电脑",
     gnum: 3,
     gprice: 2000,
     gcount: 6000
    }, {
     gid: 003,
     gname: "电视",
     gnum: 6,
     gprice: 500,
     gcount: 3000
    }];
     //总价

    $scope.totalPrice = function() {
     var totalPrice = 0;
     for(var x = 0; x < $scope.shops.length; x++) {
&nbs

最低0.47元/天解锁文章