ionic的基本使用

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

沉迷学习一一无法自拔

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

阅读量817

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/tangxueqin/article/details/79065432

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.带路由

<!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银渐变天鹅项链吊坠女纯银锁骨链韩版简约生日送女友",
							"price": 158,
							"type": "饰品"
						},
						{
							"proname": "羊剪绒外套短款女仿皮草大衣连帽皮毛一体狐狸毛领",
							"price": 120,
							"type": "女装"
						},
						{
							"proname": "星星的你同款皮草大衣女中长款狐狸毛内胆仿皮草外套",
							"price": 278,
							"type": "女装"
						},
						{
							"proname": "天天特价男士棉服冬季韩版潮流面包服男款棉衣冬天袄子男冬装外套",
							"price": 88,
							"type": "男装"
						},
						{
							"proname": "天天特价花花公子贵宾马甲男秋冬季外套羽绒棉背心休闲马夹坎肩潮",
							"price": 69,
							"type": "男装"
						},
						{
							"proname": "天天特价马丁靴女秋冬女鞋2017新款短靴女百搭英伦风裸靴平底女靴",
							"price": 79,
							"type": "鞋包"
						}
					];
				})
				.controller("democ", function($scope, prodata, $filter, $state) {
//					$state.go("state1");
					//总价
					$scope.sumPrice = 0;
					$scope.num = 0;
					$scope.datas = prodata.data;   //首页的所有商品
					$scope.cart = []; //购物车中的数量
					//购物车
					$scope.shop = function(i) {
						$scope.num = $scope.num + 1;
						var pro = $scope.datas[i];
						$scope.sumPrice = $scope.sumPrice + pro.price;
						$scope.addCart(pro); //调用处理购物车的逻辑
					}

					$scope.addCart = function(good) {
						var b = false;
						for(var i = 0; i < $scope.cart.length; i++) {
							if($scope.cart[i].good == good) {
								$scope.cart[i].num++;
								b = true;
								return;
							}

						}
						if(!b) {
							$scope.cart.push({
								"good": good,
								"num": 1
							});
						}
						console.log("购物车商品:", $scope.cart)
					}
					$scope.del = function(i) {
						var num = --$scope.cart[i].num;

						if(num == 0) {
							$scope.cart.splice(i, 1);
						}
						$scope.num = $scope.num - 1;
						var pro = $scope.datas[i];
						$scope.sumPrice = $scope.sumPrice - pro.price;

					}

					$scope.selectData = function(type) {
						//过滤数据
						$f = $filter("filter");
						$scope.datas = $f(prodata.data, {
							"type": type
						});
					}
				})
		</script>
	</head>

	<body ng-app="myApp" ng-controller="democ">

		<div class="bar bar-header bar-positive">
			<a class="button" href="#/index">运动商城</a>
			<div class="buttons">
				<span class="title">您的购物车:{{num}} 个商品 {{sumPrice|currency:"RMB ¥"}}</span>
				<a class="button" href="#/cart">结算</a>
			</div>
		</div>

		<ion-nav-view>
			<!-- 空白区域 -->
			
		</ion-nav-view>
	</body>

</html>

<ion-view view-title="运动商城">
    <ion-content style="padding-top: 50px;">
    	<div class="alert alert-warning" ng-show="cart.length==0">
        您的购物车是空的。<a href="#/index" class="alert-link">继续购物</a>
    </div>
	 <table ng-hide="cart.length==0">
	 	<tr>
	 		<td>数量</td>
	 		<td>商品名称</td>
	 		<td>单价</td>
	 		<td>小计</td>
	 	</tr>
	 	<tr ng-repeat="good in cart ">
	 		<td>{{good.num}}</td>
	 		<td>{{good.good.proname}}</td>
	 		<td>{{good.good.price|currency:"RMB ￥"}}</td>
	 		<td>{{good.good.price*good.num |currency:"RMB ￥"}} <button class="button-small" ng-click="del($index)">删除</button></td>
	 		
	 	</tr>
	 </table>
    </ion-content>
  </ion-view>

	<ion-view view-title="运动商城">
    <ion-content style="padding-top: 50px;">
	<ul>
			<li>
				<a class="button " style="width: 350px; background: steelblue;" ng-click="selectData('')">首页</a>
			</li>
			<li>
				<button class="button " style="width: 350px;" ng-click="selectData('女装')">女装</button>
			</li>
			<li>
				<button class="button " style="width: 350px;" ng-click="selectData('男装')">男装</button>
			</li>
			<li>
				<button class="button " style="width: 350px;" ng-click="selectData('饰品')">饰品</a>
			</li>
			<li>
				<button class="button " style="width: 350px;" ng-click="selectData('鞋包')">鞋包</button>
			</li>
		</ul>
		<div id="content">
			<ul class="list">
				<li class="item" ng-repeat="p in datas " style="width: 500px;">
					<h3>{{p.proname}}</h3>
					<img src="img/y.jpg" width="100px" />
					<button style="float: right;" class="button button-small button-assertive" ng-click="shop($index)">加入购物车</button>
					<span style="float: right;"> {{p.price|currency:"RMB ¥"}}</span>
				</li>
			</ul>
		</div>

    </ion-content>
  </ion-view>

沉迷学习一一无法自拔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ionic的基本使用

1.带路由 body { width: 700px; margin: 0 auto; padding: 20px; } ul { float: left; } li { margin: 0px 5px 5px 5px; } table { widt
复制链接

扫一扫

专栏目录