angluarjs的数据展示和功能

来源：互联网发布：淘宝购物车排序规则编辑：程序博客网时间：2024/05/17 15:17
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="angular-1.3.0.js"></script>    <script src="jquery.1.12.4.js"></script>    <style>        .even {            background-color: #fff ;        }        .odd {            background-color:gainsboro;        }    </style>    <script>        var app= angular.module("myApp",[]);        var data=[            {                name:"张三",                age:45,                py:"zhang san",                zhi:"总经理",            },            {                name:"李四",                age:43,                py:"li si",                zhi:"设计师",            },            {                name:"王五",                age:40,                py:"wang wu",                zhi:"工程师",            },            {                name:"赵六",                age:33,                py:"zhao liu",                zhi:"工程师",            },            {                name:"周七",                age:32,                py:"zhao qi",                zhi:"人事经理",            }        ]        app.controller("myctrl",function ($scope) {            $scope.data=data;            $scope.adduser=function () {//添加按钮点击弹出添加框                $scope.addusershow=true;            }            $scope.hq = function () {//提交的方法                if (!/^\d+$/.test($scope.age)) {                    alert("年龄必须是整数！");//判断年龄必须是整数                    return;                }                for(var i=0;i<$scope.data.length;i++) {//判断与表格中数据是否重复                    if ($scope.name == $scope.data[i].name) {//写的没错，但是忘调用了数组的参数                        alert("名称不可重复！");                        return;                    }                }                if($scope.name==null||$scope.name==""){//判断姓名不可为空                    alert("姓名不可为空！");                }else {                    if($scope.name=="习近平"){//判断输入的姓名是否包含了敏感字符                        $scope.data.push({                            name: "***",//有的话修改为它                            age: $scope.age,                            py: $scope.py,                            zhi: $scope.zhi                        });                        $scope.name = "";                        $scope.age = "";                        $scope.py = "";                        $scope.zhi = "";                        $scope.addusershow = false;                    }else{                        $scope.data.push({//没有的话正常输出                            name: $scope.name,                            age: $scope.age,                            py: $scope.py,                            zhi: $scope.zhi                        });                        $scope.name = "";                        $scope.age = "";                        $scope.py = "";                        $scope.zhi = "";                        $scope.addusershow = false;//提交之后弹出框隐藏                    }                }            };            $scope.del = function (index) {                var b = confirm("确认要删除么?");                $scope.del=(function (hh) {                    var con = confirm("确定要删除么?");                    if (con == true) {                        for (var i = 0; i < $scope.data.length; i++) {                            if ($scope.data[i].name == hh) {                                $scope.data.splice(i, 1);                            }                        }                    } else {                    }                });            }            $scope.selectNotice = function (){                if ($scope.heqi== "习近平") {                    alert("敏感词");                    return;                }                if($scope.heqi==""||$scope.heqi==null){                    alert("不能为空！");                }else{                    for(var i=0;i<$scope.data.length;i++) {                        if ($scope.heqi == $scope.data[i].name) {                            alert("成功找到此人!");                            return;                        }                    }                    alert("未搜索到该记录！");                }            }        });    </script></head><body ng-app="myApp" ng-controller="myctrl">     <div>         <div style="margin-left: 100px;">             姓名查询条件<input type="text" style="width: 300px;height:35px" ng-model="heqi"ng-change="search()">         </div>         <div style="position: absolute;top: 10px;left: 900px;">            <select style="width: 150px;height: 35px" ng-model="search2">                <option value="-">按年龄倒序</option>                <option value="">按年龄正序</option>            </select>         </div>         用户列表         <div>             <table  border="1" bordercolor="#c3c3c3" width="500" cellpadding="0" cellspacing="0" style="width:1350px;text-align: center">                 <tr style="background-color: grey">                     <td>姓名</td>                     <td>年龄</td>                     <td>拼音</td>                     <td>职位</td>                     <td>操作</td>                 </tr >                 <tr ng-repeat="item in data|orderBy:search2+'age'"ng-class="{'even':!$even,'odd':!$odd}">                     <td>{{item.name}}</td>                     <td>{{item.age}}</td>                     <td>{{item.py}}</td>                     <td>{{item.zhi}}</td>                     <td><a href="###" ng-click="del(item.name)">删除</a></td>                 </tr>             </table>             <br>         </div>         <div style="margin-left: 300px">             <h4>敏感词:习近平</h4>             <button style="background-color: forestgreen;color: white;width: 100px;height: 30px;margin-left: 100px;" ng-click="selectNotice()">查询</button> <button style="background-color: forestgreen;color: white;width: 100px;height: 30px;margin-left: 100px" ng-click="adduser()">添加用户</button>         </div>         <br>         <div style="margin-left:350px" ng-show="addusershow">             添加用户信息             <table border="1" bordercolor="#c3c3c3" width="500" cellpadding="0" cellspacing="0" style="width:500px;text-align: center" >                 <tr>                     <td>姓名:<input type="text" placeholder="请输入用户名" ng-model="name"></td>                 </tr>                 <tr>                     <td>年龄:<input type="text" placeholder="请输入年龄"ng-model="age"></td>                 </tr>                 <tr>                     <td>拼音:<input type="text" placeholder="请输入拼音"ng-model="py"></td>                 </tr>                 <tr>                     <td>职位:<input type="text" placeholder="请输入职位"ng-model="zhi"></td>                 </tr>                 <tr>                     <td><input type="button" value="保存" ng-click="hq()"></td>                 </tr>             </table>         </div>     </div></body></html>
阅读全文
0 0