angularjs之购物车的增改查1

最新推荐文章于 2020-09-07 16:33:44 发布

天生犯二

最新推荐文章于 2020-09-07 16:33:44 发布

阅读量203

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/qq_40040163/article/details/78312362

版权

html/css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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

收藏

觉得还不错? 一键收藏
0
评论
angularjs之购物车的增改查1

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/javascri
复制链接

扫一扫

专栏目录