AngularJS route与table表单

最新推荐文章于 2021-06-04 10:50:36 发布
阳光_微风_一切刚刚好
最新推荐文章于 2021-06-04 10:50:36 发布
阅读量275
点赞数 1
本文链接：https://blog.csdn.net/m0_38044521/article/details/78055668
版权
首页  路由


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clear {
            content: "";
            display: block;
            clear: both;
        }

        header {
            width: 100%;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background: #1BA2E0;
            color: white;
            font-size: 30px;
        }

        aside {
            background: greenyellow;
            width: 15%;
            height: 550px;
            float: left;
        }

        ul li a {
            text-decoration: none;
            font-size: 25px;
        }

        ul li {
            list-style: none;
            padding: 20px;
        }

        article {
            width: 85%;
            height: 550px;
            float: right;
            background: wheat;
        }

        .home_ul li img {
            width: 200px;
            height: 150px;
        }

        .home_ul li {
            float: left;
        }

        .colors {
            color: red;
        }

        .top {
            display: inline-block;
            width: 0px;
            height: 0px;
            border: 10px solid transparent;
            border-top: 10px solid red;
        }

        .base {
            display: inline-block;
            height: 0px;
            width: 0px;
            border: 10px solid transparent;
            border-bottom: 10px solid red;

        }


    </style>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script src="../angular-1.5.5/angular-route.js"></script>
    <script>
        angular.module("myapp", ["ngRoute"])
            .config(function ($routeProvider) {
                $routeProvider.when("/home", {
                    templateUrl: "pages/home.html",
                    controller: "homeCtrl"
                }).when("/forum", {
                    templateUrl: "pages/forum.html",
                    controller: "forumCtrl"
                }).when("/tribe", {
                    templateUrl: "pages/tribe.html"
                }).when("/message", {
                    templateUrl: "pages/message.html"
                })
            })
            .controller("homeCtrl", function ($scope, $http) {
                $scope.name = "Dabin首页";
                $http({
                    url: "shouye.json"
                }).then(function (data) {
                    console.log(data);
                    $scope.data = data.data;
                })
            })
            .controller("forumCtrl", function ($scope) {
                $scope.arr = [{
                    ID: "1234", name: "ipad", price: 3.400, count: 10, cun: 1, check: false
                }, {
                    ID: "1244", name: "aphone", price: 6.400, count: 100, cun: 1, check: false
                }, {
                    ID: "1254", name: "mypad", price: 4.400, count: 20, cun: 1, check: false
                }, {
                    ID: "1264", name: "zpad", price: 8.400, count: 130, cun: 1, check: false
                }];
                //删除单个
                $scope.shanchu = function (index) {
                    $scope.arr.splice(index, 1)
                }
                //排序
                $scope.paixu = function (values) {
                    $scope.order = values
                    if ($scope.order == values) {
                        $scope.judge = !$scope.judge
                    } else {
                        $scope.judge = false;
                    }
                }
                //颜色
                $scope.addclass = function (values) {
                    if ($scope.order == values) {
                        return "colors"
                    }
                }
                //三角
                $scope.traingle = function (values) {
                    if ($scope.order == values) {
                        if ($scope.judge == true) {
                            return "base"
                        } else {
                            return "top"
                        }
                    }
                }
                //全部选中
                $scope.quanxuans = function () {
                    if ($scope.quanxuan == true) {
                        for (var i = 0; i < $scope.arr.length; i++) {
                            $scope.arr[i].check = true;
                        }
                    } else {
                        for (var i = 0; i < $scope.arr.length; i++) {
                            $scope.arr[i].check = false;
                        }
                    }
                }
                //选中每个
                $scope.danxuans = function () {
                    var flag = 0;
                    for (var i = 0; i < $scope.arr.length; i++) {
                        if ($scope.arr[i].check == true) {
                            flag++;
                        }
                    }
                    if (flag == $scope.arr.length) {
                        $scope.quanxuan = true
                    } else {
                        $scope.quanxuan = false
                    }
                }

                //删除全部
                $scope.piliang = function () {
                    if ($scope.quanxuan == true) {
                        $scope.arr = [];
                    } else {
                        //批量删除
                        for (var i = $scope.arr.length - 1; i >= 0; i--) {
                            if ($scope.arr[i].check == true) {
                                $scope.arr.splice(i, 1);
                            }
                        }
                    }
                }
                //添加到购物车
                $scope.items = [];
                var numbers = 0;
                var IDs = [];
                $scope.shopping = function (ID) {
                    for (var i = 0; i < $scope.arr.length; i++) {
                        if ($scope.arr[i].ID == ID) {
                            if (IDs[i] == ID) {
                                $scope.arr[i].count -= 1;
                                for (var j = 0; j < $scope.items.length; j++) {
                                    if ($scope.items[j].id == ID) {
                                        $scope.items[j].number++;
                                    }
                                }
                            } else {
                                IDs[i] = ID;
                                console.log(IDs[i]);
                                $scope.arr[i].count -= 1;
                                $scope.items.push({
                                    "id": $scope.arr[i].ID,
                                    "name": $scope.arr[i].name,
                                    "price": $scope.arr[i].price,
                                    "number": $scope.arr[i].cun,
                                    check: false
                                })
                            }
                        }
                    }
                }


                // 单个结算
                $scope.jiesuai = function (index) {
                    $scope.items.splice(index, 1)
                }

                //全部结算选择
                $scope.quanmais = function () {
                    if ($scope.quanmai == true) {
                        for (var i = 0; i < $scope.items.length; i++) {
                            $scope.items[i].check = true;
                        }
                    } else {
                        for (var i = 0; i < $scope.items.length; i++) {
                            $scope.items[i].check = false;
                        }
                    }
                }
                //选中每个结算
                $scope.allnumber = 0;

                $scope.danmai = function () {
                    var flag = 0;
                    for (var i = 0; i < $scope.items.length; i++) {
                        if ($scope.items[i].check == true) {
                            flag++;
                            $scope.allmoney();
                        }
                    }
                    if (flag == $scope.items.length) {
                        $scope.quanmai = true
                    } else {
                        $scope.quanmai = false
                    }
                }

                //总金额
                $scope.allmoney = function () {
                    var money = 0;
                    for (var i = 0; i < $scope.items.length; i++) {
                        if ($scope.items[i].check == true) {
                            money += $scope.items[i].number * $scope.items[i].price
                        }
                    }
                    return money;
                }
            })

    </script>
</head>
<body ng-app="myapp">
<header>Dabin首页</header>
<section class="clear">
    <aside>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#forum">技术论坛</a></li>
            <li><a href="#tribe">部落</a></li>
            <li><a href="#message">留言</a></li>
        </ul>
    </aside>
    <article ng-view=""></article>
</section>
</body>
</html>



home页

<h2>{{name}}</h2>
<ul class="home_ul">
    <li ng-repeat="item in data">
        <img ng-src="{{item.img}}">
        <p>{{item.title}}</p>
    </li>
</ul>

forum页

<style>
    .forum_header {
        height: 50px;
        content: "";
        display: block;
        clear: both;
    }

    .forum_header input {
        float: left;
    }

    .forum_header button {
        float: right;
    }

    table {
        margin-left: 200px;
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid black;
        padding: 8px;
    }

    tr {
        text-align: center;
    }


</style>

<div class="forum_header">
    <input type="text" placeholder="请输入关键字" ng-model="keyword">
    <button ng-click="piliang()">批量删除</button>
</div>
<div>
    <table>
        <tr>
            <th><input type="checkbox" ng-model="quanxuan" ng-click="quanxuans()"></th>
            <th ng-click="paixu('ID')" ng-class="addclass('ID')">商品编号 <span ng-class="traingle('ID')"></span></th>
            <th ng-click="paixu('name')" ng-class="addclass('name')">商品名称 <span ng-class="traingle('name')"></span></th>
            <th ng-click="paixu('price')" ng-class="addclass('price')">商品价格 <span ng-class="traingle('price')"></span>
            </th>
            <th ng-click="paixu('count')" ng-class="addclass('count')">商品库存 <span ng-class="traingle('count')"></span>
            </th>
            <th>商品操作</th>
            <th>添加到购物车</th>
        </tr>
        <tr ng-repeat="item in arr|filter:keyword:false|orderBy:order:judge">
            <td><input type="checkbox" ng-click="danxuans()" ng-model="item.check"></td>
            <td>{{item.ID}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.count}}</td>
            <td>
                <button ng-click="shanchu($index)">删除</button>
            </td>
            <td>
                <button ng-click="shopping(item.ID)">购物车</button>
            </td>
        </tr>
    </table>
</div>
<div class="shopCart">
    <h2>购物车</h2>
    <table>
        <tr>
            <th><input type="checkbox" ng-model="quanmai" ng-click="quanmais()"></th>
            <th>序号</th>
            <th>商品</th>
            <th>数量</th>
            <th>价格</th>
            <th>结算</th>
        </tr>
        <tr ng-repeat="item in items">
            <td><input type="checkbox" ng-model="item.check" ng-click="danmai()"></td>
            <td>{{$index}}</td>
            <td>{{item.name}}</td>
            <td>{{item.number}}</td>
            <td>{{item.price*item.number}}</td>
            <td>
                <button ng-click="jiesuai($index)">结算</button>
            </td>
        </tr>
    </table>
    <p>总数量:{{allnumber}}</p>
    <p>总金额:{{allmoney()}}</p>
    <p>
        <button>总结算</button>
    </p>
</div>