angularJS实现查询和批量删除与全部删除

最新推荐文章于 2021-06-15 22:11:48 发布

gh323093

最新推荐文章于 2021-06-15 22:11:48 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/gh323093/article/details/78588894

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script type="text/javascript" src="../angular-1.5.5/angular.js"></script>
    <!--<script src="jquery-3.2.1.js"></script>-->
    <script>
        var app = angular.module("myApp", []);
        app.controller("myController", function($scope) {
            $scope.user = [{
                checked: false,
                id: "1324",
                name: "ipad",
                price: 2000,
                num: "10",
                item: "0"
            },{
                checked: false,
                id: "4567",
                name: "aphone",
                price: 5000,
                num: "100",
                item: "1"
            },{
                checked: false,
                id: "3546",
                name: "mypad",
                price: 4400,
                num: "20",
                item: "2"
            },{
                checked: false,
                id: "1987",
                name: "zpad",
                price: 3000,
                num: "120",
                item: "3"
            }]
            $scope.nc = function(index) {
                if(confirm("确认删除")) {
                    $scope.user.splice(index, 1)
                }
                //             if($scope.user[index].checked == false) {
                //                alert("请选中后删除");
                //             } else {
                //                if(confirm("确认删除")) {
                //                   $scope.user.splice(index, 1)
                //                }
                //             }
            }
            $scope.qs = function() {
                if(confirm("确认全删")) {
                    $scope.user = [];
                }
            }
            /*批量删除*/
            $scope.piliang = function() {
                if(confirm("确认删除?")) {
                    for(var i = 0; i < $scope.user.length; i++) {
                        if($scope.user[i].checked == true) {
                            $scope.user.splice(i, 1);
                            i--;
                        }
                    }
                }
            }

            $scope.selectAllClick = function(sa) {
                for(var i = 0; i < $scope.user.length; i++) {
                    $scope.user[i].checked = sa;
                }
            }
            $scope.echoChange = function(ck, id) {
                if(ck == false) {
                    $scope.user[id].checked = true;
                } else {
                    $scope.user[id].checked = false;
                }
            }
            $scope.togg = function(tit) {
                $scope.title = tit;
                $scope.desc = !$scope.desc;
            }

            //判断价格范围
            $scope.size = "--请选择--";
            $scope.priceSize = function(price, size) {
                if(size == "--请选择--") {
                    return true;
                } else {
                    var arr = size.split("-");
                    var priceMin = arr[0];
                    var priceMax = arr[1];
                    if(price > priceMin && price <= priceMax) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        });
    </script>
    <style>
        .d {
            width: 100%;
            height: 50px;
            background: gainsboro;
        }

        td {
            background: white;
        }
    </style>
</head>

<body ng-app="myApp" ng-controller="myController">
<div class="d">
    <input type="text" size="8" style="float: left;line-height: 30px" placeholder="请输入你想搜索的内容" ng-model="serch">
    <button style="float: right;line-height: 30px" ng-click="qs()">全部删除</button>
    <center><button style="line-height: 30px" ng-click="piliang()">批量删除</button></center>
</div>
<div>价格：
    <select ng-model="size">
        <option>--请选择--</option>
        <option>1000-2000</option>
        <option>2000-3000</option>
        <option>3000-4000</option>
        <option>4000-5000</option>
        <option>5000-6000</option>
    </select>&nbsp;&nbsp;
</div>
<table style="width: 100%; height: 400px; background: gainsboro;margin-top: 40px" cellspacing="1px">
    <tr>
        <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"></td>
        <td ng-click="togg('id')">商品编号</td>
        <td ng-click="togg('name')">商品名称</td>
        <td ng-click="togg('price')">商品价格</td>
        <td ng-click="togg('num')">商品库存</td>
        <td>数据操作</td>
    </tr>
    <tr ng-repeat="u in user|filter:serch|orderBy:title:desc" ng-if="priceSize(u.price,size)">
        <!--<tr ng-repeat="u in user| filter:{name:serch} |orderBy:title:desc">-->
        <td><input type="checkbox" ng-checked="u.checked" ng-click="echoChange(u.checked,$index)"></td>
        <td>{{u.id}}</td>
        <td>{{u.name}}</td>
        <td>{{u.price|currency:"￥:"}}</td>
        <td>{{u.num}}</td>
        <td><button ng-click="nc($index)">删除</button></td>
    </tr>
</table>
</body>
</html>

gh323093

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
angularJS实现查询和批量删除与全部删除

html>html lang="en">head> meta charset="UTF-8"> title>购物车title> script type="text/javascript" src="../angular-1.5.5/angular.js">script> --> script> var app = angular.mod
复制链接

扫一扫