angular+豪华版购物车+模糊查询+可以多选删除

来源：互联网发布：linux vim 向上查找编辑：程序博客网时间：2024/05/17 01:22
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        table {            border-collapse: collapse;        }        td, th {            width: 200px;            border: 1px solid gainsboro;            text-align: center;            padding: 20px;        }        button {            width: 100px;            height: 40px;            background: orange;            color: white;            border: 0px;            border-radius: 5px;        }        .search {            background: ghostwhite;            border: 1px solid gainsboro;            border-radius: 5px;            width: 1450px;            height: 50px;            line-height: 50px;            margin-bottom: 10px;        }        .search input {            width: 200px;            height: 30px;            color: #999;            border-radius: 5px;            margin-left: 20px;            border: 1px solid gainsboro;        }        .search button {            float: right;            margin-top: 5px;            margin-right: 10px;            background: red;        }        .active {            color: red;        }    </style>    <script src="angular/angular.js"></script>    <script>        var data =            [{"id": 1234, "name": 'ipad', "price": 3400, "count": 10},                {"id": 1244, "name": 'aphone', "price": 6400, "count": 100},                {"id": 1334, "name": 'mypad', "price": 4400, "count": 20},                {"id": 8234, "name": 'zpad', "price": 8400, "count": 130},            ];        var myapp = angular.module("myapp", []);        myapp.controller("myCtrl", function ($scope) {            $scope.data = data;            //设置页面默认显示            $scope.show = true;            //设置checkbox默认不选中            $scope.chk = false;            $scope.xuanz = false;            $scope.check = function (val) {                /*判断是否选中，然后控制下方的是否选中*/                if (val) {                    $scope.xuanz = true;                } else {                    $scope.xuanz = false;                }            }            $scope.search;            /*删除按钮*/            $scope.remove = function (index) {                /*判断是否确认删除*/                var b = confirm("确认删除");                if (b) {                    $scope.data.splice(index, 1);                }            }            $scope.del = function () {                /*判断是否确认删除*/                if ($scope.xuanz || $scope.checkD) {                    var b = confirm("确认删除");                    if (b) {                        //删除所有商品信息                        if ($scope.chk) {                            $scope.data.splice(0, $scope.data.length);                            //让商品信息管理页面为空白界面                            $scope.show = false;                        } else {                            for (var i = $scope.xuan1.length - 1; i >= 0; i--) {                                console.log($scope.xuan1[i]);                                for (var j = 0; j < $scope.data.length; j++) {                                    console.log($scope.data[j].id == $scope.xuan1[i]);                                    if ($scope.data[j].id == $scope.xuan1[i]) {                                        $scope.data.splice(j, 1);                                    }                                }                            }                        }                    }                } else {                    alert("先进行选中要删除的商品信息");                }            }            $scope.checkD = false;            $scope.xuan1 = [];            $scope.xuan = function (xuanl, id) {                console.log(id);                $scope.checkD = xuanl;                if (xuanl) {                    $scope.xuan1.push(id);                }            }            //判断的功能,默认是名字排序            $scope.sort = "name";            $scope.active = name;            $scope.rese = false;            $scope.sort1 = function (sort) {                $scope.active = sort;                console.log(sort);                if ($scope.sort == sort) {                    $scope.rese = !$scope.rese;                }                else {                    $scope.rese = false;                }                $scope.sort = sort;            }        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><div class="search">    <input type="text" placeholder="输入关键字…" ng-model="search">    <button ng-click="del()">批量删除</button></div><!--用来遍历对象并渲染到页面中--><table ng-show="show">    <thead>    <th><input type="checkbox" ng-model="chk" ng-click="check(chk)"></th>    <th ng-click="sort1('id')" ng-class="{active:active=='id'}">商品编号</th>    <th ng-click="sort1('name')" ng-class="{active:active=='name'}">商品名称</th>    <th ng-click="sort1('price')" ng-class="{active:active=='price'}">商品价格</th>    <th ng-click="sort1('count')" ng-class="{active:active=='count'}">商品库存</th>    <th>数据操作</th>    </thead>    <tbody>    <!--实现模糊查询-->    <tr ng-repeat="item in data| filter:search | orderBy:sort:rese ">        <td><input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)"></td>        <td>{{item.id}}</td>        <td> {{item.name}}</td>        <!--商品价格前面加“￥”-->        <td>{{item.price | currency:"￥"}}</td>        <td>{{item.count}}</td>        <td>            <button ng-click="remove($index)">删除</button>        </td>    </tr>    </tbody></table></body></html>
阅读全文
0 0