AngularJs添加删除排序Y

最新推荐文章于 2019-11-07 18:48:51 发布

Stagefright

最新推荐文章于 2019-11-07 18:48:51 发布

阅读量229

点赞数

本文链接：https://blog.csdn.net/L59_1/article/details/78766604

版权

Angularjs对数据的添加,点击添加按钮弹出添加框,还有对数据的查询,单个删除

    <title></title>
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            * {margin: 0px auto;padding: 0px;}
            .main {margin-top: 50px;width: 800px;}
            tr:nth-of-type(odd) {background: #FFFFFF;}
            tr:nth-of-type(odd):hover { background: #41C7DB;}
            tr:nth-of-type(even) {background: #EEEEEE;}
            tr:nth-of-type(even):hover {background: #41C7DB;}
            a {text-decoration: none;}
            .cha {width: 650px;}
        </style>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <div class="main">
            <input type="text" ng-model="name" class="cha" />
            <select ng-change="change()" ng-model="age" ng-init="age=ages[0]">
            <option ng-repeat="x in ages">{{x}}</option>
        </select>
            <table border="1px" cellpadding="0px" cellspacing="0px" width="800px" style="margin-top: 30px;">
                <tr style="background: gray;">
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>拼音</th>
                    <th>职位</th>
                    <th>操作</th>
                </tr>
                <tr ng-repeat="person in persons">
                    <th>{{person.name}}</th>
                    <th>{{person.age}}</th>
                    <th>{{person.pin}}</th>
                    <th>{{person.zhiwei}}</th>
                    <th><a href="#" ng-click="dele($index)">删除</a></th>
                </tr>
            </table>
            <input type="button" value="查询" ng-click="cha()" style="margin-top: 30px;width: 100px;" />
            <input type="button" value="添加" ng-click="xianshi()" style="margin-top: 30px;width: 100px;" />
            <hr />
            <fieldset ng-show="xs">
                <legend>添加用户信息</legend>
                姓名:<input type="text" ng-model="name1" /><br> 年龄:
                <input type="text" ng-model="age1" /><br> 拼音:
                <input type="text" ng-model="pin1" /><br> 职位:
                <input type="text" ng-model="zhiwei1" /><br>
                <input type="button" value="保存" ng-click="add()" />
            </fieldset>
        </div>
        <script type="text/javascript">
            var mo = angular.module("myApp", []);
            mo.controller("myCtrl", function($scope) {
                $scope.ages = ["按年龄正序排序", "按年龄倒序排列"];
                //定义数组
                var persons_temp = [{
                    "name": "张三",
                    "age": 22,
                    "pin": "zhnagsan",
                    "zhiwei": "总经理"
                }, {
                    "name": "李四",
                    "age": 20,
                    "pin": "lisi",
                    "zhiwei": "总经理"
                }, {
                    "name": "杨过",
                    "age": 25,
                    "pin": "yangguo",
                    "zhiwei": "总经理"
                }];
                //赋值
                $scope.persons = persons_temp;
                //排序
                $scope.change = function() {
                        var a1 = $scope.age;
                        console.log("--" + a1);
                        if (a1 == "按年龄倒序排列") {
                            console.log(a1 + "----")
                            persons_temp.sort(function(a, b) {
                                return b.age - a.age;
                            });
                        } else {
                            persons_temp.sort(function(a, b) {
                                return a.age - b.age;
                            });
                        }
                        //重新赋值
                        $scope.persons = persons_temp;
                    }
                    //查询
                $scope.cha = function() {
                        //新数组
                        var newPersons = [];
                        if ($scope.name == "") {
                            alert("名字不能为空")
                            return;
                        }
                        //遍历
                        for (var i = 0; i < persons_temp.length; i++) {
                            var n1 = persons_temp[i].name;
                            //模糊查询
                            if (n1.indexOf($scope.name)!=-1) {
                                newPersons.push(persons_temp[i]);
                            }
                        }
                        //判断
                        if (newPersons.length == 0) {
                            alert("没有匹配项");
                            return;
                        }
                        $scope.persons = newPersons;
                    }
                    //删除
                $scope.dele = function($index) {
                        persons_temp.splice($index, 1);
                        $scope.persons = newPersons;
                        return false;
                    }
                    //控制显示/隐藏
                $scope.xianshi = function() {
                        $scope.xs = true;
                    }
                    //保存
                $scope.add = function() {
                    //创建对象
                    var obj = {
                        "name": $scope.name1,
                        "age": $scope.age1,
                        "pin": $scope.pin1,
                        "zhiwei": $scope.zhiwei1
                    };
                    persons_temp.push(obj);
                    $scope.persons = persons_temp;
                    //添加完毕，将输入框清空
                    $scope.name1="";
                    $scope.age1="";
                    $scope.pin1="";
                    $scope.zhiwei1="";
                    //隐藏掉
                    $scope.xs = false;
                }
            })
        </script>
    </body>
</html>

Stagefright

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs添加删除排序Y

<title></title> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> * {margin: 0px auto;padding: 0px;} .main
复制链接

扫一扫