购物车页面跳转功能实现

最新推荐文章于 2023-02-01 11:24:42 发布

DJSYPO

最新推荐文章于 2023-02-01 11:24:42 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/DJSYPO/article/details/79081901

版权

本文介绍了一个电商应用中，从主页面跳转到购物车页面的功能实现。在主页面，用户可以浏览商品并点击按钮将商品加入购物车。购物车页面会显示商品的数量、名称、单价和小计，且当购物车为空时，提示用户继续购物。通过ng-click事件处理，实现了页面之间的数据交互和操作功能。

摘要由CSDN通过智能技术生成

//功能实现页面主页面

<!DOCTYPE html>

<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <link rel="stylesheet" href="lib/css/ionic.css" />
       <script src="lib/js/ionic.bundle.js"></script>
       <style>
           body {
               width: 700px;
               margin: 0 auto;
               padding: 20px;
           }

           ul {
               float: left;
           }

           li {
               margin: 0px 5px 5px 5px;
           }
           table {
               width: 80%;
               border-bottom: 1px solid;
           }

           table tr td {
               margin: 3px;
           }
       </style>
       <script>
           angular.module("myApp", ["ionic"])
               .config(function($stateProvider,$urlRouterProvider) {
                   $stateProvider
                       .state("state1", {
                           url: "/index",
                           templateUrl: "views/index.html"

                       })
                       .state("state2", {
                           url: "/cart",
                           templateUrl: "views/cart.html"

                       })

                       $urlRouterProvider.otherwise("/index");

               }).service("prodata", function($http) {
                   this.cart = [];
                   this.data = [{
                           "proname": "天天特价S925银渐变天鹅项链吊坠女纯银锁骨链韩版简约生日送女友&#