ak47

最新推荐文章于 2022-06-13 14:18:36 发布
百分之99的爱
最新推荐文章于 2022-06-13 14:18:36 发布
阅读量503
点赞数
本文链接：https://blog.csdn.net/dongchangqi95/article/details/78355969
版权
<!DOCTYPE html>
<html ng-app="UserApp">
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
    <style>
        #bao{
            margin-left: 70px;
        }
        #tab2{
            border: solid 1px black;
            margin-left: 130px;
            margin-top: 20px;
        }
        #tab2 td{
            border-style: none;
        }
        body{
            width: 550px;
            height: 500px;
            margin: 0 auto;
        }
        #sp{
            font-size: 12px;
            margin-right: 40px;
        }
        #ch{
            margin-right: 40px;
        }
        .tab,td{
            border-collapse: collapse;
            border-right: solid 1px black;
        }
        .tab tr:nth-child(even){
            background-color: #F7E1B5;
        }
        .tab tr:nth-child(odd){
            background-color: aquamarine;
        }
        #tou{
            background-color: burlywood;
        }
        .tab{
            width: 500px;
            border-top: solid 1px black;
            border-left: solid 1px black;
            border-bottom: solid 1px black;
        }
        #chax{
            margin-left: 100px;
        }
        #tianj{
            margin-left: 100px;
        }
        #shc{
            text-decoration: none;
            color: black;
        }
    </style>
    <script>
        var app = angular.module("UserApp",[]);
        app.controller("UserCtrl",function($scope){
            $scope.arr = [{nam:"张三",age:"18",pinyin:"zhang san",page:"总经理"},
                {nam:"李四",age:"19",pinyin:"li si",page:"设计师"},
                {nam:"王五",age:"20",pinyin:"wang wu",page:"工程师"},
                {nam:"赵六",age:"21",pinyin:"zhao liu",page:"工程师"},
                {nam:"周七",age:"22",pinyin:"zhou qi",page:"人事经理"}];
            var vva = $scope.arr;
            $scope.cha = function(){
                var vvarr = $scope.arr;
                if($scope.chaxun==null||$scope.chaxun.trim().length==0){
                    alert("请输入姓名");
                    $scope.arr = [];
                    for(var i=0;i<vvarr.length;i++){
                        $scope.arr.push(vvarr[i]);
                    }
                    return;
                }
                if(isContains($scope.chaxun)){
                    alert("包含敏感词汇");
                    $scope.arr = [];
                    for(var i=0;i<vvarr.length;i++){
                        $scope.arr.push(vvarr[i]);
                    }
                    return;
                }

                $scope.arr = [];
                var v = 0;
                for(var i=0;i<vvarr.length;i++){
                    if($scope.chaxun==vvarr[i].nam){
                        $scope.arr.push(vvarr[i]);
                        v = 1;
                    }
                }
                if(v==0){
                    alert("未找到内容");
                    $scope.arr = [];
                    for(var i=0;i<vvarr.length;i++){
                        $scope.arr.push(vvarr[i]);
                    }
                }
            }
            var isContains = function(str) {
                return str.indexOf("毛主席") >= 0;
            }
            $scope.chaa = function(){
                if($scope.chaxun==null||$scope.chaxun.trim().length==0){
                    $scope.arr = [];
                    for(var i=0;i<vva.length;i++){
                        $scope.arr.push(vva[i]);
                    }
                }

            }
            $scope.tianjia = function(){
                $scope.tianisshow = true;
            }
            $scope.tijiao = function(){
                if($scope.tianname==null||$scope.tianname.trim().length==0){
                    alert("添加姓名不能为空");
                    return;
                }
                if(checkValue($scope.tiannage)){
                    alert("年龄格式错误");
                    return;
                }
                if($scope.tianpinyin==null||$scope.tianpinyin.trim().length==0){
                    alert("姓名拼音不能为空");
                    return;
                }
                if($scope.tianpage==null||$scope.tianpage.trim().length==0){
                    alert("职位不能为空");
                    return;
                }
                $scope.arr.push({nam:$scope.tianname,age:$scope.tiannage,pinyin:$scope.tianpinyin,page:$scope.tianpage});
                vva = [];
                vva = $scope.arr;
                $scope.tianisshow = false;
            }
            var checkValue = function (shuzi) {
                return isNaN(shuzi);
            }
            $scope.shanchu = function(index){
                if(confirm("确定要删除吗?")){
                    $scope.arr.splice(index,1);
                }
            }
        });
    </script>
</head>
<body ng-controller="UserCtrl">
    <span id="sp">用户列表</span>姓名查询条件<input type="text" ng-model="chaxun" placeholder="敏感词汇:毛主席" id="ch" ng-change="chaa()">
    <select ng-model="orderByage">
        <option value="">选择按年龄排序</option>
        <option value="age">年龄正序</option>
        <option value="-age">按年龄倒序</option>
    </select>
    <br>
    <table class="tab">
        <thead>
            <tr id="tou">
                <td>姓名</td>
                <td>年龄</td>
                <td>拼音</td>
                <td>职位</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="ar in arr | orderBy : orderByage">
                <td>{{ar.nam}}</td>
                <td>{{ar.age}}</td>
                <td>{{ar.pinyin}}</td>
                <td>{{ar.page}}</td>
                <td><a href="#" ng-click="shanchu($index)" id="shc">删除</a></td>
            </tr>
        </tbody>
    </table>
    <br>
    <input type="button" value="查询" ng-click="cha()" id="chax"><input type="button" value="添加用户" ng-click="tianjia()" id="tianj">
    <br>
    <table ng-show="tianisshow" id="tab2">
        <tr>
            <td>姓名<input type="text" ng-model="tianname"></td>
        </tr>
        <tr>
            <td>年龄<input type="text" ng-model="tiannage"></td>
        </tr>
        <tr>
            <td>拼音<input type="text" ng-model="tianpinyin"></td>
        </tr>
        <tr>
            <td>职位<input type="text" ng-model="tianpage"></td>
        </tr>
        <tr>
            <td><input type="button" value="保存" ng-click="tijiao()" id="bao"></td>
        </tr>
    </table>
</body>
</html>