angularJs 用户添加

神秘的玖零

于 2017-10-24 15:05:39 发布

阅读量299

点赞数

文章标签： angularJs

本文链接：https://blog.csdn.net/zihang0814/article/details/78329754

版权

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>
        .box1{
            width: 700px;
            text-align: center;
        }
        .box2{
            text-align: center;
            margin-left: 150px;
        }
        .box3{
            text-align: center;
            margin-left: 150px;
        }
        .btn {
            color: white;
            background-color: #008aa6;
            padding: 0px 1em;
            height: 36px;
            margin-top: 20px;
            margin-left: 10px;
            border: 0px solid black;
            border-radius: 5px;
            margin-right: 270px;
        }
    </style>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.data=[{
                name:"张三",
                pwd:123,
                age:22,
                sex:"男"
            },{
                name:"李四",
                pwd:456,
                age:33,
                sex:"女"
            },{
                name:"王五",
                pwd:789,
                age:44,
                sex:"男"
            }];

            $scope.ages="--请选择--";
            $scope.sexs="--请选择--";

            $scope.agefilter=function (item) {
                if($scope.ages!="--请选择--"){
                    var arr=$scope.ages.split("-");
                    var min=arr[0];
                    var max=arr[1];
                    if(min<=item.age&&item.age<max){
                        return true;
                    }else{
                        return false;
                    }
                }else{
                    return true;
                }
            }
            $scope.sexfilter=function (item) {
                
            }
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div>
    <h2 align="center">用户信息表</h2>
</div>
<div class="box1">
    <input type="text" ng-model="search" size="10" placeholder="用户名查询">
    年龄:<select ng-model="ages">
            <option>--请选择--</option>
            <option>20-30</option>
            <option>30-40</option>
            <option>40-50</option>
        </select>
    性别:<select ng-model="sexs">
            <option>男</option>
            <option>女</option>
        </select>
    <input type="button" value="全部删除" ng-click="delAll()">
    <input type="button" value="批量删除" ng-click="delSelect()">
</div><br>
<div class="box2">
    <table border="2" bordercolor="black" width="400" cellspacing="0" cellpadding="5">
        <thead>
            <tr>
                <th>序号</th>
                <th>id</th>
                <th>用户名</th>
                <th>密码</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in data|filter:{'name':search}|filter:agefilter|filter:sexfilter">
                <td><input type="checkbox"></td>
                <td>{{$index}}</td>
                <td>{{item.name}}</td>
                <td>{{item.pwd}}</td>
                <td>{{item.age}}</td>
                <td>{{item.sex}}</td>
                <td><button ng-click="updatePwd">修改密码</button></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="box3">
    <button class="btn" ng-click="addUser()">添加用户</button>
</div>
</body>
</html>