angular用户添加案例_用angular写一个添加用户的页面-优快云博客

本文链接：https://blog.youkuaiyun.com/PremierAmour/article/details/78864302
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/angular.min.js"></script>
        <title></title>
        <style>
            th {
                background: #CCCCCC;
            }
            td{
                width: 150px;
                height: 60px;
                text-align: center;
            }
            tr:nth-of-type(odd) {
                background: #6699CC;
            }
        </style>
    </head>

    <body ng-app="app" ng-controller="ct">
        <center>
            年龄排序
            <select ng-change="cage()" ng-model="age" ng-init="age=as[0]">
            <option ng-repeat="a in as">{{a}}</option>
        </select> id排序
            <select ng-change="cid()" ng-model="id" ng-init="id=xs[0]">
            <option ng-repeat=" x in xs">{{x}}</option>
        </select> 姓名
            <input type="text" ng-model="name" />
            <input type="button" value="按照姓名查询" ng-click="sel()" />
            <input type="button" value="添加新用户" ng-click="add()" />
            <table cellpadding="0px" cellspacing="0px" border="1px">
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>联系方式</th>
                    <th>爱好</th>
                    <th>操作</th>
                </tr>
                <tr ng-repeat="g in gs">
                    <td>{{g.id}}</td>
                    <td>{{g.name}}</td>
                    <td>{{g.age}}</td>
                    <td>{{g.sex}}</td>
                    <td>{{g.tel}}</td>
                    <td>{{g.ah}}</td>
                    <td>
                        <a href="#" style="color:red;" ng-click="gai($index)">修改</a>
                        <a href="#" style="color:red;" ng-click="del($index)">删除</a>
                    </td>
                </tr>
            </table>
            <fieldset ng-show="xian">
                <legend>添加用户</legend>
                <form>
                    id<input type="text" ng-model="id1" /><br /> 姓名
                    <input type="text" ng-model="name1" /><br /> 年龄
                    <input type="text" ng-model="age1" /><br /> 性别
                    <select ng-model="sex1">
                        <option ng-click="nan()">男</option>
                        <option ng-click="nv()">女</option>
                    </select>
                    <br /> 联系方式
                    <input type="text" ng-model="tel1" /><br /> 爱好
                    <input type="text" ng-model="ah1" /><br />
                    <input type="button" value="添加" ng-click="cun()" />
                    <input type="reset" value="清空" />
                </form>
            </fieldset>
            <fieldset ng-show="up">
                <legend>修改用户</legend>
                <form>
                    id<input type="text" ng-model="ids" /><br /> 姓名
                    <input type="text" ng-model="names" /><br /> 年龄
                    <input type="text" ng-model="ages" /><br /> 性别
                    <select ng-model="sexs">
                        <option ng-click="nan()">男</option>
                        <option ng-click="nv()">女</option>
                    </select>
                    <br /> 联系方式
                    <input type="text" ng-model="tels" /><br /> 爱好
                    <input type="text" ng-model="ahs" /><br />
                    <input type="button" value="修改" ng-click="ok(index)" ng-model="i" />
                    <input type="reset" value="清空" />
                </form>
            </fieldset>
        </center>
        <script type="text/javascript">
            var mo = angular.module("app", []);
            mo.controller("ct", function($scope) {
                var arr = [{
                    "id": "1851",
                    "name": "张三",
                    "age": "45",
                    "sex": "男",
                    "tel": "453061515151",
                    "ah": "打游戏"
                }, {
                    "id": "1005",
                    "name": "李四",
                    "age": "99",
                    "sex": "女",
                    "tel": "453061515151",
                    "ah": "游泳"
                }, {
                    "id": "1008",
                    "name": "王五",
                    "age": "52",
                    "sex": "男",
                    "tel": "453061515151",
                    "ah": "看书"
                }, {
                    "id": "1075",
                    "name": "小米",
                    "age": "28",
                    "sex": "女",
                    "tel": "453061515151",
                    "ah": "旅游"
                }];
                $scope.gs = arr;
                $scope.add = function() {
                    $scope.xian = true;
                }
                $scope.as = ["年龄正序", "年龄倒序"]
                $scope.xs = ["id正序", "id倒序"]
                    //添加
                $scope.cun = function() {
                        var abj = {
                            "id": $scope.id1,
                            "name": $scope.name1,
                            "age": $scope.age1,
                            "sex": $scope.sex1,
                            "tel": $scope.tel1,
                            "ah": $scope.ah1
                        };
                        arr.push(abj);
                        $scope.gs = arr;
                        $scope.id1 = "";
                        $scope.name1 = "";
                        $scope.age1 = "";
                        $scope.sex1 = "";
                        $scope.tel1 = "";
                        $scope.ah1 = "";
                        $scope.xian = false;
                    }
                    //删除
                $scope.del = function($index) {
                        $scope.gs.splice($index, 1)
                    }
                    //按照年龄 进行排序
                $scope.cage = function() {
                        var a1 = $scope.age;
                        if (a1 == "年龄正序") {
                            $scope.gs.sort(function(a, b) {
                                return a.age - b.age;

                            })
                        } else {
                            $scope.gs.sort(function(a, b) {
                                return b.age - a.age;
                            })
                        }
                        $scope.gs = arr;
                    }
                    //按照id 进行排序
                $scope.cid = function() {
                        var a2 = $scope.id;
                        if (a2 == "id正序") {
                            $scope.gs.sort(function(a, b) {
                                return a.id - b.id;

                            })
                        } else {
                            $scope.gs.sort(function(a, b) {
                                return b.id - a.id;
                            })
                        }
                        $scope.gs = arr;
                    }
                    //查询
                $scope.sel = function() {
                        var lin = [];
                        var names = $scope.name;
                        if (names == "" || names == null) {
                            alert("查询内容不能为空");
                            return;
                        }
                        for (var i = 0; i < arr.length; i++) {
                            var r = arr[i].name;
                            if (r.indexOf(names) != -1) {
                                lin.push(arr[i]);
                            }
                        }
                        if (lin.length == 0) {
                            alert("无此用户");
                            return;
                        }
                        $scope.gs = lin;

                    }
                    //修改
                $scope.gai = function($index) {
                        $scope.up = true;
                        var id2 = $scope.gs[$index].id;
                        var name2 = $scope.gs[$index].name;
                        var age2 = $scope.gs[$index].age;
                        var sex2 = $scope.gs[$index].sex;
                        var tel2 = $scope.gs[$index].tel;
                        var ah2 = $scope.gs[$index].ah;

                        $scope.ids = id2;
                        $scope.names = name2;
                        $scope.ages = age2;
                        $scope.sexs = sex2;
                        $scope.tels = tel2;
                        $scope.ahs = ah2;
                        $scope.i = $index;
                    }
                    //保存修改后的内容
                $scope.ok = function() {
                    var news = {
                        "id": $scope.ids,
                        "name": $scope.names,
                        "age": $scope.ages,
                        "sex": $scope.sexs,
                        "tel": $scope.tels,
                        "ah": $scope.ahs
                    };
                    $scope.gs.splice($scope.i, 1, news);
                    $scope.up = false;
                }
                $scope.nan = function() {
                    $scope.sex1 = "男"
                }
                $scope.nv = function() {
                    $scope.sex1 = "女"
                }
            });
        </script>
    </body>

</html>