Angular 入门用户信息管理表

来源：互联网发布：优秀的短篇小说知乎编辑：程序博客网时间：2024/06/06 05:16
下面代码是一个简单的用户信息管理表！
<!DOCTYPE html><html ng-app="UApp"><head lang="en">    <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="angular-1.3.0.js"></script>    <script type="text/javascript" src="jquery.1.12.4.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: 28,                sex: "女"            },            {                id: 6,                name: "小乔",                password: "123456",                age: 26,                sex: "女"            }                ];    </script>    <script type="text/javascript">        var app = angular.module("UApp",[]);        app.controller("MyCtrl",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                }            ];            // 清空列表：$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 != undefined && $scope.search_name != null) {                    name = $scope.search_name.trim();                }                // 未选中时值：undefined，选中“请选择”按钮时值：null                if ($scope.search_age != undefined && $scope.search_age != null && $scope.search_age != "") {                    age = $scope.search_age; // age = json对象，如：{txt: "70~80", min: 70, max: 80 }                }                if ($scope.search_sex != undefined && $scope.search_sex != null) {                    sex = $scope.search_sex;                }                // 没有可查询的项                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;                    }                }            };            $scope.removeAll = function() {                $scope.data = [];            }            $scope.removeCheck = function() {                var remove_idx_arr = [];// 待删除的所有索引                //获取所有users并且被选择的checkbox                $("input[name='users']:checked").each(function() {                    var indexs = this.value;                    remove_idx_arr.push(indexs);                });                var data = $scope.data;//备份当前列表                $scope.data = [];//清空                for(var idx in data) {                    // 索引不在待删除的所有索引中，添加到新列表中                    if(remove_idx_arr.indexOf(idx) == -1) {                        $scope.data.push(data[idx]);                    }                }            };            $(function() {                $("input[name='check_all']").click(function() {                    var cheed = this.checked;                    $("input[name='users']").each(function() {                        this.checked = cheed;                    });                });            });            $scope.addUser = function () {                $scope.addUserIsShow = true;            };              var id = 1;            $scope.add = function() {                $scope.data.push({                    id: id++,                    name: $scope.name,                    password: $scope.password,                    age: $scope.age,                    sex: $scope.sex                });                $scope.name = "";                $scope.password = "";                $scope.age = "";                $scope.sex = "";                $scope.addUserIsShow = false;            }            $scope.editUser = function(index) {                var user = $scope.data[index];                $scope.e_name = user.name;                $scope.e_old_password = "";                $scope.e_password = "";                $scope.e_repassword = "";                $scope.editUserIsShow = true;                $scope.index = index;            }            $scope.edit = function () {                if ($scope.e_password != $scope.e_repassword) {                    alert("两次密码不一致！");                    return;                }                $scope.data[$scope.index].password = $scope.e_password;                $scope.editUserIsShow = false;            };        });    </script>    <style>        .btn {            margin-left: 130px;            margin-top: 25px;        }    </style></head><body ng-controller="MyCtrl"><div>    <input type="text" ng-model="search_name" ng-change="search()" placeholder="用户名查询">          年龄：    <select ng-model="search_age" ng-options="section.txt for section in age_sections"            ng-change="search()">        <option value="">请选择</option>    </select>          性别：    <select ng-model="search_sex" ng-change="search()">        <option value="">请选择</option>        <option value="男">男</option>        <option value="女">女</option>    </select>    <button ng-click="removeAll()">全部删除</button>    <button ng-click="removeCheck()">批量删除</button></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>        </th>    </tr>    <tr ng-repeat="user in data">        <td>            <input type="checkbox" name="users" value="{{$index}}"/>        </td>        <td>{{ user.id }}</td>        <td>{{ user.name }}</td>        <td>{{ user.password }}</td>        <td>{{ user.age }}</td>        <td>{{ user.sex }}</td>        <td>            <button ng-click="editUser($index)">修改密码</button>        </td>    </tr></table><button class="btn" ng-click="addUser()">添加用户</button><div ng-show="addUserIsShow">    <table border="1">        <tr>            <td>                用户名：            </td>            <td>                <input type="text" ng-model="name"/>            </td>        </tr>        <tr>            <td>                密码：            </td>            <td>                <input type="text" ng-model="password"/>            </td>        </tr>        <tr>            <td>                年龄：            </td>            <td>                <input type="text" ng-model="age"/>            </td>        </tr>        <tr>            <td>                性别：            </td>            <td>                <input type="text" ng-model="sex"/>            </td>        </tr>        <tr>            <td colspan="2" align="center">                <button ng-click="add()">提交</button>            </td>        </tr>    </table></div><div ng-show="editUserIsShow">    <table border="1">        <tr>            <td>                用户名：            </td>            <td>                <input type="text" ng-model="e_name" disabled/>            </td>        </tr>        <tr>            <td>                旧密码：            </td>            <td>                <input type="text" ng-model="e_old_password"/>            </td>        </tr>        <tr>            <td>                新密码：            </td>            <td>                <input type="text" ng-model="e_password"/>            </td>        </tr>        <tr>            <td>                确认密码：            </td>            <td>                <input type="text" ng-model="e_repassword"/>            </td>        </tr>        <tr>            <td colspan="2" align="center">                <input type="hidden" ng-model="index"/>                <button ng-click="edit()">提交</button>            </td>        </tr>    </table></body></html>
阅读全文
0 0