ionic练习（5）- 用户管理（查询信息）

来源：互联网发布：sai中文版官方下载mac 编辑：程序博客网时间：2024/05/22 10:35
<!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.data前，备份下全部数据            var oldData = $scope.data;            $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);                // 清空列表                $scope.data = [];                // 从全部数据中查找name、age、sex，找到后添加到列表中                for (var i in oldData) {                    // name和age、sex 只要满足其中一个要求就可以添加到列表                    var item = oldData[i];                    // name相等，添加列表                    if (item.name == name) {                        $scope.data.push(item);                        continue;                    }                    // age在区间，添加列表，age = json对象，如：{txt: "70~80", min: 70, max: 80 }                    if (item.age >= age.min && item.age <= age.max) {                        $scope.data.push(item);                        continue;                    }                    // sex相等，添加列表                    if (item.sex == sex) {                        $scope.data.push(item);                        continue;                    }                }            };        });    </script></head><body ng-controller="UMCtrl"><div>    <input type="text" ng-model="search_name_value" ng-change="search()" placeholder="用户名查询"/>    &nbsp;&nbsp;    年龄：    <select ng-model="search_age_value" ng-options="section.txt for section in age_sections"            ng-change="search()">        <option value="">请选择</option>    </select>    &nbsp;&nbsp;    性别：    <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