angularjs增改查

来源：互联网发布：易观数据怎么样编辑：程序博客网时间：2024/06/07 19:08
<!DOCTYPE html><html ng-app="UsersApp"><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 app = angular.module("UsersApp", []);        app.controller("UsersCtrl", function ($scope) {            $scope.data = [                {                    id: 1,                    name: "aa",                    password: "aa",                    age: 10,                    sex: "男"                },                {                    id: 2,                    name: "bb",                    password: "bb",                    age: 20,                    sex: "男"                },                {                    id: 3,                    name: "cc",                    password: "cc",                    age: 30,                    sex: "男"                },                {                    id: 4,                    name: "dd",                    password: "dd",                    age: 40,                    sex: "男"                }            ];            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.addUser = function () {                $scope.addUserIsShow = true;            };            $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.addUserIsShow = false;            };            var old_data = $scope.data;            $scope.searchByName = function () {                $scope.data = [];                for (var i in old_data) {                    if (old_data[i].name == $scope.s_name) {                        $scope.data.push(old_data[i]);                    }                }            };        });        $(function () {            $("input[name='check_all']").click(function () {                var chked = this.checked;                $("input[name='users']").each(function () {                    this.checked = chked;                });            });        });    </script></head><body ng-controller="UsersCtrl"><div>    <input type="text" ng-model="s_name" placeholder="用户名查询" ng-change="searchByName()"/></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="users"/>        </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 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></div></body></html>
阅读全文
0 0