angular（查询、删除、添加、排序）案例

来源：互联网发布：android上传图片到php 编辑：程序博客网时间：2024/06/05 07:04
效果图
添加部分未做判断，有需要的自己加一下就可以了
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>        <script type="text/javascript" src="js/angular.min.js"></script>        <title></title>        <style>            tr {                height: 40px;            }            td {                width: 200px;            }            input{                width: 220px;                height: 40px;            }            .i {                width: 150px;                height: 70px;            }            tr:nth-of-type(odd) {                background: pink;            }            tr:nth-of-type(odd):hover {                background: #41C7DB;            }            tr:nth-of-type(even) {                background: palevioletred;            }            tr:nth-of-type(even):hover {                background: #41C7DB;            }        </style>    </head>    <body ng-app="app" ng-controller="kong">        <center>            <input type="text" ng-model="name" placeholder="姓名查询条件" />            <select ng-change="chan()" ng-model="age" ng-="age=xs[0]">            <option ng-repeat="x in xs">{{x}}</option>        </select>            <table cellpadding="0px" cellspacing="0px" border="1px">                <tr>                    <th><input type="checkbox" ng-model="ch" ng-click="che"/></th>                    <th>姓名</th>                    <th>年龄</th>                    <th>拼音</th>                    <th>职位</th>                    <th>操作</th>                </tr>                <tr ng-repeat="g in gs">                    <th><input type="checkbox" ng-model="xuan" /></th>                        <td>{{g.name}}</td>                        <td>{{g.age}}</td>                        <td>{{g.pin}}</td>                        <td>{{g.zhi}}</td>                        <td><a href="#" ng-click="del($index)">删除</a></td>                </tr>            </table>            <input type="button" value="查询" class="i" ng-click="select()" />            <input type="button" value="添加" class="i" ng-click="jia()" /><br />            <fieldset ng-show="xian">                <input type="text" placeholder="姓名" ng-model="name1" /><br />                <input type="text" placeholder="年龄" ng-model="age1" /><br />                <input type="text" placeholder="拼音" ng-model="pin1" /><br />                <input type="text" placeholder="职位" ng-model="zhi1" /><br />                <input type="button" value="保存" ng-click="cun()" />            </fieldset>        </center>        <script>            var mo = angular.module("app", []);            mo.controller("kong", function($scope) {                $scope.xs = ["按年龄正序排序", "按年龄倒序排序"];                var shu = [{                    "name": "张三",                    "age": "78",                    "pin": "zhangsan",                    "zhi": "保洁"                }, {                    "name": "李四",                    "age": "18",                    "pin": "lisi",                    "zhi": "程序员"                }, {                    "name": "王五",                    "age": "28",                    "pin": "wangwu",                    "zhi": "boss"                }];                $scope.gs = shu;                //添加按钮                $scope.jia = function() {                        $scope.xian = true;                    }                    //保存添加数据                $scope.cun = function() {                        var abj = {                            "name": $scope.name1,                            "age": $scope.age1,                            "pin": $scope.pin1,                            "zhi": $scope.zhi1                        }                        shu.push(abj);                        $scope.gs = shu;                        //保存完成后清空输入框                        $scope.name1 = "";                        $scope.age1 = "";                        $scope.pin1 = "";                        $scope.zhi1 = "";                        $scope.xian = false;                    }                    //删除                $scope.del = function($index) {                        shu.splice($index, 1);                        $scope.shu = newPersons;                        return false;                    }                    //排序                $scope.chan = function() {                        var a1 = $scope.age;                        if (a1 == "按年龄正序排序") {                            shu.sort(function(a, b) {                                return a.age - b.age;                            })                        } else {                            shu.sort(function(a, b) {                                return b.age - a.age;                            })                        }                        $scope.gs = shu;                    }                    //查询                $scope.select = function() {                    var newPersons = [];                    var v = $scope.name;                    if (v == ""||v==null) {                        alert("查询条件不能为空");                        return;                    }                    for (var i = 0; i < shu.length; i++) {                        var r = shu[i].name;                        if (r.indexOf(v) != -1) {                            newPersons.push(shu[i]);                        }                    }                    //判断                    if (newPersons.length == 0) {                        alert("没有匹配项");                        return;                    }                    $scope.gs = newPersons;                }            });        </script>    </body></html>
阅读全文
0 0