ionic+meta name+AnjularJS+添加购物车

最新推荐文章于 2017-10-18 20:21:59 发布

Logitech12

最新推荐文章于 2017-10-18 20:21:59 发布

阅读量336

点赞数

本文链接：https://blog.csdn.net/Logitech12/article/details/78264689

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ionic</title>
    <!--<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">-->
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../lib/css/ionic.min.css">
    <script src="../lib/js/ionic.bundle.min.js"></script>
    <script>
        var myapp=angular.module("myapp",["ionic"]);
        myapp.controller('MyController', function($scope, $http) {
            $scope.items=[
                {"title":"01","desc":"2016秋季爆款","imgsrc":"img/TB1_50x50.jpg"},
                {"title":"02","desc":"2016秋季爆款","imgsrc":"img/TB2_50x50.jpg"},
                {"title":"03","desc":"2016秋季爆款","imgsrc":"img/TB3_50x50.jpg"},
                {"title":"04","desc":"2016秋季爆款","imgsrc":"img/TB4_50x50.jpg"},
                {"title":"05","desc":"2016秋季爆款","imgsrc":"img/TB1_50x50.jpg"},
                {"title":"06","desc":"2016秋季爆款","imgsrc":"img/TB4_50x50.jpg"},
                {"title":"06","desc":"2016秋季爆款","imgsrc":"img/TB4_50x50.jpg"},
                {"title":"06","desc":"2016秋季爆款","imgsrc":"img/TB4_50x50.jpg"},
                {"title":"06","desc":"2016秋季爆款","imgsrc":"img/TB4_50x50.jpg"},
                {"title":"06","desc":"2016秋季爆款","imgsrc":"img/TB4_50x50.jpg"},
                {"title":"06","desc":"2016秋季爆款","imgsrc":"img/TB4_50x50.jpg"}
            ];
            $scope.doRefresh = function() {
                $http.get('../data.json')
                    .success(function(newItems) {
                        $scope.items = newItems;
                    })
                    .finally(function() {
                        // 停止广播ion-refresher
                        $scope.$broadcast('scroll.refreshComplete');
                    });
            };
        });
    </script>
</head>
<body ng-app="myapp">
    <ion-header-bar align-title="center" class="bar-positive">
        <div class="buttons">
            <button class="button" ng-click="doSomething()">左侧按钮</button>
        </div>
        <h1 class="title">Title!</h1>
        <div class="buttons">
            <button class="button">右侧按钮</button>
        </div>
    </ion-header-bar>
    <ion-content ng-controller="MyController">
        <ion-refresher
                pulling-text="下拉刷新..."
                on-refresh="doRefresh()">
        </ion-refresher>
        <ion-list>
            <ion-item ng-repeat="item in items"></ion-item>
        </ion-list>
    </ion-content>
    <ion-footer-bar align-title="center" class="bar-assertive">
        <div class="buttons">
            <button class="button">左侧按钮</button>
        </div>
        <h1 class="title">Title!</h1>
        <div class="buttons" ng-click="doSomething()">
            <button class="button">右侧按钮</button>
        </div>
    </ion-footer-bar>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        li{
            list-style: none;
        }
    </style>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var app = angular.module("myapp",[]);
        app.controller("mycont",function ($scope) {
            $scope.data = {
                categories: [
                    {check: false, category: "商品01"},
                    {check: false, category: "商品02"},
                    {check: false, category: "商品03"},
                    {check: false, category: "商品04"}],
                //商品明细
                products: [
                    {category: "商品01", name: "鼠标", desc: "2016春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
                    {category: "商品01", name: "键盘", desc: "2016夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
                    {category: "商品01", name: "主机", desc: "2016秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
                    {category: "商品01", name: "显示器", desc: "2016冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"},
                    {category: "商品01", name: "鼠标", desc: "2016春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
                    {category: "商品01", name: "键盘", desc: "2016夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
                    {category: "商品01", name: "主机", desc: "2016秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
                    {category: "商品01", name: "显示器", desc: "2016冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"},
                    {category: "商品02", name: "鼠标", desc: "2015春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
                    {category: "商品02", name: "键盘", desc: "2015夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
                    {category: "商品02", name: "主机", desc: "2015秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
                    {category: "商品02", name: "显示器", desc: "2015冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"},
                    {category: "商品03", name: "鼠标", desc: "2014春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
                    {category: "商品03", name: "键盘", desc: "2014夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
                    {category: "商品03", name: "主机", desc: "2014秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
                    {category: "商品03", name: "显示器", desc: "2014冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"},
                    {category: "商品04", name: "鼠标", desc: "2013春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
                    {category: "商品04", name: "键盘", desc: "2013夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
                    {category: "商品04", name: "主机", desc: "2013秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
                    {category: "商品04", name: "显示器", desc: "2013冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"}
                ]
            };
            $scope.fun = function () {
                var n = 0;
                var j = 0;
                for (var i=0;i<$scope.data.categories.length;i++){
                    if ($scope.data.categories[i].check == true){
                        n++;
                        j=i;
                    }
                }
                if (n == 0){
                    alert("空");
                } else if (n == 1){
                    alert($scope.data.categories[j].category);
                } else {
                    alert("选多了");
                }
            }
            $scope.cart = [];
            $scope.add = function (item) {
                var has = false;
                for (var i=0;i<$scope.cart.length;i++){
                    if (item.name == $scope.cart[i].item.name){
                        has = true;
                        $scope.cart[i].num ++;
                        break;
                    } else {
                        has = false;
                    }
                }
                if (hsa == false){
                    $scope.cart.push({item:item,num:1});
                }
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="mycont">
    <ul>
        <li ng-repeat="item in data.categories">
            <input type="checkbox" ng-model="item.check">
            {{item.category}}
        </li>
    </ul>
    <button ng-click="fun()">选取对应商品</button>
    <br/><br/>
    <table>
        <thead>
         <tr>
            <td>商品类别</td>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>添加购物车</td>
         </tr>
        </thead>
        <tbody>
         <tr ng-repeat="item in data.products">
            <td>{{item.category}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price|currency:"￥"}}</td>
            <td><button ng-click="add(item)">添加到购物车</button></td>
         </tr>
        </tbody>
    </table>
    <h1>购物车</h1>
    <table>
        <thead>
         <tr>
            <td>产品</td>
            <td>数量</td>
            <td>价格</td>
            <td>小计</td>
         </tr>
        </thead>
        <tbody>
         <tr ng-repeat="item in cart">
            <td>{{item.item.name}}</td>
            <td>{{item.num}}</td>
            <td>{{item.item.price|currency:"￥"}}</td>
            <td>{{item.item.price*item.num|currency:"￥"}}</td>
         </tr>
        </tbody>
    </table>
    <p></p>
</body>
</html>

Logitech12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic+meta name+AnjularJS+添加购物车

html>html lang="en">head> meta charset="UTF-8"> title>ionictitle> --> meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maxi
复制链接

扫一扫