angularjs 练习

最新推荐文章于 2018-07-29 20:42:13 发布
神秘的玖零
最新推荐文章于 2018-07-29 20:42:13 发布
阅读量285
点赞数
本文链接：https://blog.csdn.net/zihang0814/article/details/78355129
版权
angularJs 专栏收录该内容
9 篇文章 0 订阅
订阅专栏
<!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>