angularjs查询

来源：互联网发布：html设计软件编辑：程序博客网时间：2024/06/07 07:49

<!DOCTYPE html>
<html ng-app="UMApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>用户管理 - 查询</title>
    <script type="text/javascript">
        var example_data = [
            {
                id: 1,
                name: "曹操",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 2,
                name: "张辽",
                password: "123456",
                age: 34,
                sex: "男"
            },
            {
                id: 3,
                name: "司马懿",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 4,
                name: "夏侯淳",
                password: "123456",
                age: 40,
                sex: "男"
            },
            {
                id: 5,
                name: "蔡文姬",
                password: "123456",
                age: 18,
                sex: "女"
            },
            {
                id: 6,
                name: "刘备",
                password: "123456",
                age: 50,
                sex: "男"
            },
            {
                id: 7,
                name: "关羽",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 8,
                name: "张飞",
                password: "123456",
                age: 46,
                sex: "男"
            },
            {
                id: 9,
                name: "赵云",
                password: "123456",
                age: 35,
                sex: "男"
            },
            {
                id: 10,
                name: "孙尚香",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 11,
                name: "孙权",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 12,
                name: "周瑜",
                password: "123456",
                age: 32,
                sex: "男"
            },
            {
                id: 13,
                name: "鲁肃",
                password: "123456",
                age: 33,
                sex: "男"
            },
            {
                id: 14,
                name: "黄盖",
                password: "123456",
                age: 55,
                sex: "男"
            },
            {
                id: 15,
                name: "小乔",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 16,
                name: "小乔",
                password: "123456",
                age: 26,
                sex: "女"
            }
        ];
    </script>

    <script type="text/javascript">
        var app = angular.module("UMApp", []);

        app.controller("UMCtrl", function ($scope) {
            $scope.data = example_data;

            // 查询的年龄区间
            $scope.age_sections = [
                {
                    txt: "10~20",
                    min: 10,
                    max: 20
                },
                {
                    txt: "20~30",
                    min: 20,
                    max: 30
                },
                {
                    txt: "30~40",
                    min: 30,
                    max: 40
                },
                {
                    txt: "40~50",
                    min: 40,
                    max: 50
                },
                {
                    txt: "50~60",
                    min: 50,
                    max: 60
                },
                {
                    txt: "60~70",
                    min: 60,
                    max: 70
                },
                {
                    txt: "70~80",
                    min: 70,
                    max: 80
                }
            ];

            $scope.search = function () {
                var name = "";
                var age = {}; // json对象，如：{ txt: "70~80", min: 70, max: 80 }
                var sex = "";

                if ($scope.search_name_value != undefined && $scope.search_name_value != null) {
                    name = $scope.search_name_value.trim();
                }

                // 未选中时值：undefined，选中“请选择”按钮时值：null
                if ($scope.search_age_value != undefined && $scope.search_age_value != null && $scope.search_age_value != "") {
                    age = $scope.search_age_value; // age = json对象，如：{txt: "70~80", min: 70, max: 80 }
                }

                if ($scope.search_sex_value != undefined && $scope.search_sex_value != null) {
                    sex = $scope.search_sex_value;
                }

                // 没有可查询的项
                if (name == "" && age == {} && sex == "") {
                    return;
                }

                console.log("需要查找的name: " + name + ", 需要查找的age区间: [" + age.min + "~" + age.max + "], 需要查找的sex: " + sex);

                // 从全部数据中查找name、age、sex，找到后添加到列表中
                for (var i in $scope.data) {
                    var item = $scope.data[i];

                    var index = parseInt(i) + 1; // 第一个tr是表头，所以用i + 1

                    // name相等，显示
                    if (item.name == name) {
                        $("tr:eq(" + index + ")").show();
                        continue;
                    }

                    // 性别满足，显示
                    if (item.sex == sex) {
                        $("tr:eq(" + index + ")").show();
                        continue;
                    }

                    if (age != {} && item.age >= age.min && item.age <= age.max) {
                        $("tr:eq(" + index + ")").show();
                        continue;
                    }

                    // 3个条件都不符合，隐藏
                    $("tr:eq(" + index + ")").hide();
                }
            };
        });
    </script>
</head>
<body ng-controller="UMCtrl">
<div>
    <input type="text" ng-model="search_name_value" ng-change="search()" placeholder="用户名查询"/>
      
    年龄：
    <select ng-model="search_age_value" ng-options="section.txt for section in age_sections"
            ng-change="search()">
        <option value="">请选择</option>
    </select>
      
    性别：
    <select ng-model="search_sex_value" ng-change="search()">
        <option value="">请选择</option>
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
</div>

<table border="1">
    <tr>
        <th>
            <input type="checkbox" name="check_all"/>
        </th>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="user in data">
        <td>
            <input type="checkbox" name="user_id[]"/>
        </td>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.password }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.sex }}</td>
        <td>
            <button>修改密码</button>
        </td>
    </tr>
</table>
</body>
</html>

阅读全文

0 0