angularjs 练习

来源：互联网发布：成都瑞星数据恢复编辑：程序博客网时间：2024/06/06 09:51
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../angular-1.5.5/angular.js"></script>    <style>        *{            margin: auto;            padding: 0;        }        body{            text-align: center;            margin: 50px auto;        }        table        {            margin-top: 30px;        }        thead{            background-color: #777;        }        tbody tr:nth-child(odd) {            background-color: #ccc;        }        tbody tr:nth-child(even) {            background-color: #fff;        }        tr.change:hover        {            background-color: #10a4ff        }        .slickButton {            color: white;            font-weight: bold;            padding: 10px;            border: solid 1px black;            background: lightgreen;            cursor: pointer;        }        .slickButton:hover {            color: black;            background: yellow;        }    </style>    <script>        //主模块        var myapp=angular.module("myapp",[]);        //控制器        myapp.controller("myCtrl",function ($scope) {            //模拟数据            $scope.data=[{                name:"张三",                age:45,                pinyin:"zhang san",                zw:"总经理",                cz:false            },{                name:"李四",                age:43,                pinyin:"li si",                zw:"设计师",                cz:false            },{                name:"王五",                age:40,                pinyin:"wang wu",                zw:"工程师",                cz:false            },{                name:"赵六",                age:33,                pinyin:"zhao liu",                zw:"工程师",                cz:false            },{                name:"周七",                age:32,                pinyin:"zhou qi",                zw:"人事经理",                cz:false            }];            //过滤敏感字            $scope.search="";            $scope.search2="";            $scope.$watch("search",function(value){                console.log(value);                if(value.indexOf("枪")!=-1){                    alert("包含敏感字");                    $scope.search="";                }else{                    $scope.search2=$scope.search;                }            });            $scope.ages="按照年龄倒序";            //排序 正序倒序            $scope.pai=function () {                if( $scope.ages!="按照年龄倒序")                {                    if( $scope.ages=="按照年龄倒序")                    {                        return false;                    }                    else                    {                        return true;                    }                }                return false;            }            //添加信息            $scope.show=false;            $scope.add=function () {                $scope.show=true;            }            $scope.uname="";            $scope.uage="";            $scope.upinyin="";            $scope.uzw="";            $scope.addUser=function () {                if ($scope.uname == "" ) {                    alert("请输入姓名");                }else if($scope.uage == ""){                    alert("请输入年龄");                }else if($scope.upinyin == ""){                    alert("请输入拼音");                }else if($scope.uzw == ""){                    alert("请输入位置");                }                else {                    for (var i = 0; i < $scope.data.length; i++) {                        if ($scope.data[i].name == $scope.uname) {                            alert("此用户已存在");                            $scope.uname = "";                            $scope.uage = "";                            $scope.upinyin = "";                            $scope.uzw = "";                            break;                        }                        else if (i == $scope.data.length - 1) {                            $scope.data.push({                                name: $scope.uname,                                age: $scope.uage,                                pinyin: $scope.upinyin,                                zw: $scope.uzw                            });                            $scope.uname = "";                            $scope.uage = "";                            $scope.upinyin = "";                            $scope.upiao = "";                            $scope.uzw = false;                            break;                        }                    }                    $scope.show=false;                }            }            /*删除条目*/            $scope.del=function (index) {                if(confirm("确定移除此项嘛？")){                    $scope.data.splice(index,1);                }            }            //查询比对            $scope.chaxun=function () {                if($scope.name!=search){                    alert("请输入姓名")                }            }        });    </script></head><body ng-app="myapp" ng-controller="myCtrl">姓名查询条件<input type="text" ng-model="search"><select ng-model="ages">    <option>按照年龄倒序</option>    <option>按照年龄正序</option></select><table border="1px soilde #000" width="400px">     <thead>        <tr class="change">            <th>姓名</th>            <th>年龄</th>            <th>拼音</th>            <th>职位</th>            <th>操作</th>        </tr>     </thead>     <tbody>         <tr class="change"ng-repeat="item in data|filter:{name:search}|orderBy:'ages':pai()">             <td>{{item.name}}</td>             <td>{{item.age}}</td>             <td>{{item.pinyin}}</td>             <td>{{item.zw}}</td>             <td><button ng-click="del($index)"class="slickButton">删除</button></td>         </tr>     </tbody></table><button ng-click="chaxun()">查询</button><button ng-click="add()">添加用户</button><table border="1px solide #000" ng-show="show">    <p>添加用户信息</p>    <tr>        <td>姓名:</td>        <td><input type="text" ng-model="uname"></td>    </tr>    <tr>        <td>年龄:</td>        <td><input type="text" ng-model="uage"></td>    </tr>    <tr>        <td>拼音:</td>        <td><input type="text" ng-model="upinyin"></td>    </tr>    <tr>        <td>职位:</td>        <td><input type="text" ng-model="uzw"></td>    </tr>    <tr align="center"><td><button ng-click="addUser()">保存</button></td></tr></table></body></html>
阅读全文
0 0