完整三国增删改查,条件查询条件排序,敏感字符“习近平“

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src="angular-1.3.0.js"></script>
    <script src="jquery.1.12.4.js"></script>

    <script>
        var app=angular.module("myapp",[]);
        app.controller("myctrl",function ($scope) {
            //五个基本的数据
            $scope.data = [
                {
                    id: 1,
                    name: "曹操",
                    password: "123456",
                    age: 45,
                    sex: "女"
                },
                {
                    id: 2,
                    name: "张辽",
                    password: "123456",
                    age: 34,
                    sex: "男"
                },
                {
                    id: 3,
                    name: "司马懿",
                    password: "123456",
                    age: 30,
                    sex: "女"
                },
                {
                    id: 4,
                    name: "夏侯淳",
                    password: "123456",
                    age: 40,
                    sex: "男"
                },
                {
                    id: 5,
                    name: "蔡文姬",
                    password: "123456",
                    age: 18,
                    sex: "女"
                },
            ];

            //=========================================================
//            //单击进行添加
            $scope.add=function () {
                if ($scope.name == undefined || $scope.name == "") {
                    alert("用户名不能为空!");
                    return;
                }

                if ($scope.password == undefined || $scope.password == "") {
                    alert("密码不能为空!");
                    return;
                }

                if ($scope.age == undefined || $scope.age == "") {
                    alert("年龄不能为空!");
                    return;
                }

                if ($scope.sex == undefined || $scope.sex == "") {

                    alert("性别不能为空!");
                    return;
                }
                if (!/^\d+$/.test($scope.age)) {
                    alert("年龄必须是整数!");
                    return;
                }


                //当点击时给数组里面添加   进行for循环判断
                for(var i=0;i<$scope.data.length;i++){
                    //如果数组里的数据和要添加的输入框的数据相同就不让添加     主要是判断重名的效果
                    if($scope.data[i].name == $scope.name){

                        alert("该用户名已存在")
                        break;
                    }else
                    if(i==$scope.data.length-1) {
                        //添加数据
                        var id=$scope.data[$scope.data.length-1].id;
                        $scope.data.push({
                            id: ++id ,
                            name: $scope.name,
                            password: $scope.password,
                            age: $scope.age,
                            sex: $scope.sex,
                        })
                        break;

                    }
                }
                //添加后清空
                $scope.name="";
                $scope.password="";
                $scope.age="";
                $scope.sex="";

                //点击提交后就隐藏框
                $scope.show=false;
            };
            //单击添加时 就显示框
            $scope.tian=function () {
                $scope.show=true;
            }

//================================================================================
            //移除一项
            $scope.remove=function(index){
                if(confirm('确定删除吗?')){
                    $scope.data.splice(index,1);
                }
            };
            //全部删除
            $scope.rem=function () {
                if(confirm('是否全部删除')){
                    $scope.data=[];
                }
            }

            //批量删除
            $scope.removeChecked = function () {

                var remove_idx_arr = []; // 待删除的所有索引

                // 获取所有user_id[]并且被选择的Checkbox
                $("input[name='wei']:checked").each(function () {
                    var index = this.value;
                    remove_idx_arr.push(index);
                });

                var data = $scope.data; // 备份当前列表
                $scope.data = []; // 清空当前列表
                for (var idx in data) {
                    // 索引不在待删除的所有索引中,添加到新列表中
                    if (remove_idx_arr.indexOf(idx) == -1) {
                        $scope.data.push(data[idx]);
                    }
                }
            };


            //=====================================================================
            //点击修改密码时
            $scope.gai=function (index) {

                var user=$scope.data[index];
                $scope.ename=user.name;
                $scope.epassword="";
                $scope.pass1="";
                $scope.pass2="";
                $scope.show2=true;
                $scope.index=index;
            }
            $scope.tijiao=function () {
                if($scope.epassword!= $scope.data[$scope.index].password){
                    alert("旧密码错误");
                    return;
                }
                if($scope.pass1!=$scope.pass2){
                    alert("俩次密码不一致");
                    return;
                }
                //把新的值付给旧的值
                $scope.data[$scope.index].password=$scope.pass1;
                //false  隐藏
                $scope.show2=false;
            }

            //========================================================================
            //排序   正序和倒序
            $scope.order = function () {
                if ($scope.paixu == 1) {
                    $scope.data.sort(function (json1, json2) {
                        return (json1.age > json2.age) ? 1 : -1;
                    });
                } else if ($scope.paixu == 2) {
                    $scope.data.sort(function (json1, json2) {
                        return (json1.age < json2.age) ? 1 : -1;
                    });
                }
            };
            //当输入框 ng-change="searchByName()" 发送改变时触发,进行判断
            $scope.searchByName=function () {

                if($scope.s_name=="习近平"){
                    alert("敏感字符");
                    $scope.s_name="";
                    return;
                }
            }
//================================================================================
            //性别查询
            $scope.search = function () {

                for (var idx in $scope.data) {
                    //var trIdx = parseInt(idx) + 1;

                    // 索引不在待删除的所有索引中,添加到新列表中
                    if ($scope.search_sex_value == $scope.data[idx].sex) {

                        $(".cc:eq(" + idx + ")").show();
                    } else {
                        $(".cc:eq(" + idx + ")").hide();
                    }
                    //位置必须在此处否则程序错误
                    if($scope.search_sex_value==""){
                        $(".cc:eq(" + idx + ")").show();
                    }
                }
            }


            // 查询的年龄区间
            $scope.ss="--请选择--";
            $scope.pricefilter=function (item) {
                $scope.ff=$scope.ss;
                if($scope.ss!="--请选择--"){
                    var arr=$scope.ff.split("-");
                    var min=arr[0];
                    var max=arr[1];
                    if(item.age<min||item.age>max){
                        return false;
                    }else{
                        return true;
                    }
                }else {
                    return true;
                }
            }

        });




        //==========================================================================
        //判断全选和全不选
        $(function () {
            $("input[name='tou']").click(function () {
                //当点击时选中是true否则false
                var chked=this.checked;
                //使用each进行循环 使每一个ID都选中或者不选中
                $("input[name='wei']").each(function () {
                    this.checked=chked;
                })
            })
        })
    </script>

</head>
<body ng-app="myapp" ng-controller="myctrl">
<div>
    <input type="text" ng-model="s_name"  ng-change="searchByName()"   />
    &nbsp;&nbsp;
    年龄:
    <select ng-model="ss">
        <option>--请选择--</option>
        <option>10-20</option>
        <option>20-30</option>
        <option>30-40</option>
        <option>40-50</option>
        <option>50-60</option>
        <option>60-70</option>
    </select>
    &nbsp;&nbsp;
    性别:
    <select ng-model="search_sex_value" ng-change="search()">
        <option value="">请选择</option>
        <option value="男"></option>
        <option value="女"></option>
    </select>
    排序
    <select ng-model="paixu" ng-change="order()">
        <option value="">排序</option>
        <option value="1">票数正序</option>
        <option value="2">票数倒序</option>
    </select>
    <button ng-click="removeChecked()">批量删除</button>
    <button ng-click="rem()">全部删除</button>

</div>

</div>
<table border="1">
    <tr>
        <td>
            <input type="checkbox" name="tou">
        </td>
        <td>id</td>
        <td>用户名</td>
        <td>密码</td>
        <td>年龄</td>
        <td>性别</td>
        <td colspan="2" align="center">操作</td>
    </tr>
    <tr ng-repeat="user in data  | filter:{name:s_name}| filter:pricefilter" class="cc">
        <td>
            <input type="checkbox" name="wei" value="{{ $index }}">
        </td>
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.password}}</td>
        <td>{{user.age}}</td>
        <td>{{user.sex}}</td>
        <td>
            <button ng-click="remove($index)">点击删除</button>
        </td>
        <td>
            <button ng-click="gai($index)">修改密码</button>
        </td>

    </tr>
</table>
<button ng-click="tian()">添加用户</button>

<div ng-show="show">
    <table border="1">
        <tr>
            <td>用户名:</td>
            <td><input type="text" ng-model="name"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="text" ng-model="password"></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><input type="text" ng-model="age"></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td><input type="text" ng-model="sex"></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button ng-click="add()">提交</button>
            </td>
        </tr>
    </table>
</div>
<!--修改-->
<div ng-show="show2">
    <table border="1">
        <tr>
            <td>用户名:</td>
            <!--disabled  不可改变-->
            <td><input type="text" ng-model="ename" disabled></td>
        </tr>
        <tr>
            <td>旧密码:</td>
            <td><input type="text" ng-model="epassword"></td>
        </tr>
        <tr>
            <td>新密码</td>
            <td><input type="text" ng-model="pass1"></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="text" ng-model="pass2"></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="hidden" ng-model="index">
                <button ng-click="tijiao()">提交</button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页