angular 全选全删修改排序_序量删 angbingqi 设默认顺序,同时按此排列团长点2号上下-CSDN博客

本文链接：https://blog.csdn.net/xiaozhang0414/article/details/78827131
这里写图片描述
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
    .tab1 {
        width: 500px;
    }

    .tab2 {
        margin-top: 20px;
        width: 700px;
    }

    fieldset {
        margin-top: 20px;
        width: 700px;
    }
</style>

<body ng-app="myapp" ng-controller="mycontroller">
    <div class="div1">
        <h5>管理信息</h5>
        <table class="tab1">
            <tr>
                <td> <input type="button" value="批量删除" ng-click="pldele()" /></td>
                <td>用户名：<input type="text" ng-keydown="huiche($event)" ng-model="name_1" /></td>
                <td>
                    <select ng-change="xl()" ng-model="xlname" ng-init="xlname=ags[0]">
                        <option ng-repeat="ag in ags">{{ag}}</option>

                    </select>
                </td>
                <td><input type="button" value="添加" ng-click="add()" /></td>
            </tr>
        </table>

        <table border="1px" cellspacing="0" cellpadding="0" class="tab2">

            <tr>
                <td><input type="checkbox" ng-click="qu()" ng-model="fla" /></td>
                <td>姓名</td>
                <td>年龄</td>
                <td>城市</td>
                <td>录入日期</td>
                <td>操作</td>
            </tr>

            <tr ng-repeat="emp in emps">
                <td><input type="checkbox" ng-checked="dx1" ng-model="dx" ng-click="ck($index)" /></td>
                <td>{{emp.ename}}</td>
                <td>{{emp.eage}}</td>
                <td>{{emp.esite}}</td>
                <td>{{emp.edate|date:"yyyy-MM-dd HH-mm-ss"}}</td>
                <td>
                    <input type="button" value="修改" ng-click="xiugai($index)" ng-model="i" />
                    <input type="button" value="删除" />
                </td>
            </tr>

        </table>

        <fieldset ng-show="sos">
            <legend>用户添加</legend>
            姓名<input type="text" ng-model="name_2" /> <br/> 年龄
            <input type="text" ng-model="age_2" /> <br/> 城市
            <input type="text" ng-model="site_2" /> <br/> 录入日期
            <input type="date" ng-model="date_2" /> <br/>
            <input type="button" value="保存" ng-click="bz()" ng-model="i" />
        </fieldset>
    </div>

</body>
<script type="text/javascript">
    var mo = angular.module("myapp", []);
    mo.controller("mycontroller", function($scope) {

        $scope.ags = ["年龄正序", "年龄倒序"];

        var empss = [{
                "ename": "张三",
                "eage": "20",
                "esite": "北京",
                "edate": new Date(),
                "flas": false
            }, {
                "ename": "李四",
                "eage": "25",
                "esite": "北京",
                "edate": new Date(),
                "flas": false
            }

        ]

        $scope.emps = empss;
        //每行的checkbox选择状态要改变数组的值
        $scope.ck = function($index) {
            $scope.emps[$index].dx = !$scope.emps[$index].dx;
        };

        //批量删除
        $scope.pldele = function() {
            //删除之后数组会改变所以要反着遍历
            for(var i = $scope.emps.length - 1; i >= 0; i--) {
                var g = $scope.emps[i];
                if(g.dx) {
                    $scope.emps.splice(i, 1);
                }
            }
        };

        //模糊查询
        $scope.huiche = function($event) {
            var key = $event.keyCode;
            var enames = [];
            var name1 = $scope.name_1;
            if(key == 13) {
                for(var i = 0; i < empss.length; i++) {
                    if(empss[i].ename.indexOf(name1) != -1) {
                        enames.push(empss[i]);

                    }
                }
                $scope.emps = enames;
            }
        }

        //排序
        $scope.xl = function() {
            var xlnames = $scope.xlname;
            alert(xlnames)
            if(xlnames == "年龄正序") {
                $scope.emps.sort(function(a, b) {
                    return a.eage - b.eage;
                })

            } else {

                $scope.emps.sort(function(a, b) {
                    return b.eage - a.eage;
                })
            }

        }
        //点击添加显示点加的div输入框
        $scope.add = function() {
            $scope.sos = true;
        }

        //全选/全不选
        $scope.qu = function() {
            //删除之后数组会改变所以要反着遍历

            for(var i = $scope.emps.length - 1; i >= 0; i--) {
                $scope.emps[i].flas = $scope.fla;
            }
            //通过获取ng-model的值给ng-checked复制
            $scope.dx = $scope.fla;

            //批量删除
            $scope.pldele = function() {
                //删除之后数组会改变所以要反着遍历
                for(var i = $scope.emps.length - 1; i >= 0; i--) {
                    var g = $scope.emps[i].flas;
                    if(g) {
                        $scope.emps.splice(i, 1);
                    }
                }
                //全选框赋我faalse
                $scope.fla = false;
            };
        }

        $scope.xiugai = function($index) {
            $scope.sos = true;
            var nn = $scope.emps[$index].ename;
            var ee = $scope.emps[$index].eage;
            var ss = $scope.emps[$index].esite;
            var dd = $scope.emps[$index].edate;
            var ff = $scope.emps[$index].flas;
            //$scope.i会赋值下标
            $scope.i = $index;
            alert($scope.i)
            $scope.name_2 = nn;
            $scope.age_2 = ee;
            $scope.site_2 = ss;
            $scope.date_2 = dd;

        }

        $scope.bz = function() {
            alert($scope.i)
            //把添加和修改设同一个值   点击修改时$scope.i会赋值下标 
            //点击添加时$scope.i 没有被赋值所以是undefined
            //根据她来使用同一个布局


            if($scope.i == undefined) {
                //    添加
                var empes = {
                    "ename": $scope.name_2,
                    "eage": $scope.age_2,
                    "esite": $scope.site_2,
                    "edate": $scope.date_2,
                    "flas": false
                }

                empss.push(empes);
                $scope.emps = empss;
                //添加完成隐藏div
                $scope.sos = false;
                $scope.name_2 = "";
                $scope.age_2 = "";
                $scope.site_2 = "";
                $scope.date_2 = "";

            } else {
                //修改
                var newpenson = {
                    "ename": $scope.name_2,
                    "eage": $scope.age_2,
                    "esite": $scope.site_2,
                    "edate": $scope.date_2,
                    "flas": false
                }

                empss.splice($scope.i, 1, newpenson);
                $scope.emps = empss;
                $scope.sos = false;
                //修改后从新给 $scope.i赋值undefined
                $scope.i = undefined

            }

        }

    })
</script>