找回密码
当前位置：前端开发者 > AngularJS > 正文

前端框架AngularJS综合练习-1

2018-09-19 20:43:55 分类：AngularJS 阅读(123) 评论(0)

小程序前端开发环境 前端开发系统环境搭建 web前端开发的社会环境

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″ />
    <title>angularJS 综合练习</title>
    <link rel=”stylesheet” href=”//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css”>
    <script src=”http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js”></script>
</head>
<body>
    <body ng-app=”myApp” ng-controller=”userCtrl”>
        <div class=”container”>
            <h3>Users</h3>
            <table class=”table table-striped”>
                <thead>
                    <tr>
                        <th>Edit</th>
                        <th>id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat=”user in users”>
                        <td>
                            <button class=”btn” ng-click=”editUser(user.id)”>
                                <span class=”glyphicon glyphicon-pencil”></span>&nbsp;&nbsp;Edit
                            </button>
                        </td>
                        <td>{{ user.id }}</td>
                        <td>{{ user.fName }}</td>
                        <td>{{ user.lName }}</td>
                    </tr>
                </tbody>
            </table>
            <hr>
            <button class=”btn btn-success” ng-click=”editUser(‘new’)”>
                <span class=”glyphicon glyphicon-user”></span> 添加一个新用户
            </button>
            <hr>
            <h3 ng-show=”edit”>添加一个新用户:</h3>
            <h3 ng-hide=”edit”>修改密码:</h3>
            <form class=”form-horizontal”>
                <div class=”form-group”>
                    <label class=”col-sm-2 control-label”>First Name:</label>
                    <div class=”col-sm-10″>
                        <input class=”form-control” type=”text” ng-model=”fName” ng-disabled=”!edit” placeholder=”First Name”>
                    </div>
                </div>
                <div class=”form-group”>
                    <label class=”col-sm-2 control-label”>Last Name:</label>
                    <div class=”col-sm-10″>
                        <input class=”form-control” type=”text” ng-model=”lName” ng-disabled=”!edit” placeholder=”Last Name”>
                    </div>
                </div>
                <div class=”form-group has-feedback” ng-hide=”edit” ng-class=”{false:’has-error’}[oldPass]”>
                    <label class=”col-sm-2 control-label”>Old Password:</label>
                    <div class=”col-sm-10″>
                        <input class=”form-control” type=”password” ng-model=”passw0″ placeholder=”旧密码默认是各行的ID”>
                        <span class=”glyphicon glyphicon-remove form-control-feedback” aria-hidden=”true” ng-show=”!oldPass”></span>
                    </div>
                </div>
                <div class=”form-group has-feedback” ng-class=”{false:’has-error’}[samePass]”>
                    <label class=”col-sm-2 control-label”>New Password:</label>
                    <div class=”col-sm-10″>
                        <input class=”form-control” type=”password” ng-model=”passw1″ placeholder=”New Password”>
                        <span class=”glyphicon glyphicon-remove form-control-feedback” aria-hidden=”true” ng-show=”!samePass”></span>
                    </div>
                </div>
                <div class=”form-group has-feedback” ng-class=”{false:’has-error’}[samePass]”>
                    <label class=”col-sm-2 control-label”>Repeat:</label>
                    <div class=”col-sm-10″>
                        <input class=”form-control” type=”password” ng-model=”passw2″ placeholder=”Repeat New Password”>
                        <span class=”glyphicon glyphicon-remove form-control-feedback” aria-hidden=”true” ng-show=”!samePass”></span>
                    </div>
                </div>
            </form>
            <hr>
            <button class=”btn btn-success” ng-disabled=”error || incomplete” ng-click=”modifyPassWord()”>
                <span class=”glyphicon glyphicon-save”></span> {{txt}}
            </button>
        </div>
        <script>
            var app = angular.module(‘myApp’, []);
            var users = [{
                id: 1,
                fName: “点击”,
                lName: “前面”,
                passWord: “1”
            }, {
                id: 2,
                fName: “编辑”,
                lName: “按钮”,
                passWord: “2”
            }, {
                id: 3,
                fName: “可以”,
                lName: “修改”,
                passWord: “3”
            }, {
                id: 4,
                fName: “各行”,
                lName: “密码”,
                passWord: “4”
            }, {
                id: 5,
                fName: “shi”,
                lName: “qi”,
                passWord: “5”
            }];
            app.controller(“userCtrl”, function ($scope) {
                $scope.fName = “”;
                $scope.lName = “”;
                $scope.selectedId = “”;
                $scope.edit = false;
                $scope.incomplete = true;
                $scope.error = true;
                $scope.txt = “Save Changes”;
                $scope.samePass = true;
                $scope.oldPass = true;
                $scope.users = window.users;
                $scope.editUser = function (id) {
                    $scope.selectedId = id;
                    $scope.passw0 = “”;
                    $scope.passw1 = “”;
                    $scope.passw2 = “”;
                    if (id == “new”) {
                        $scope.fName = “”;
                        $scope.lName = “”;
                        $scope.edit = true;
                        $scope.txt = “add user”;
                    } else {
                        $scope.edit = false;
                        $scope.fName = $scope.users[id – 1].fName;
                        $scope.lName = $scope.users[id – 1].lName;
                        $scope.txt = “Save Changess”;
                    };
                };
                $scope.modifyPassWord = function () {
                    if ($scope.selectedId == “new”) {
                        var newUser = {
                            id: $scope.users.length + 1,
                            fName: $scope.fName,
                            lName: $scope.lName,
                            passWord: $scope.passw1
                        };
                        $scope.users.push(newUser);
                    } else {
                        console.log($scope.users[$scope.selectedId – 1])
                        $scope.users[$scope.selectedId – 1].passWord = $scope.passw2;
                        console.log($scope.users[$scope.selectedId – 1])
                    };
                    $scope.fName = “”;
                    $scope.lName = “”;
                    $scope.passw0 = “”;
                    $scope.passw1 = “”;
                    $scope.passw2 = “”;
                    $scope.edit = true;
                    $scope.txt = “Save Changes”;
                    $scope.incomplete = true;
                    $scope.error = true;
                    $scope.selectedId = “”;
                };
                $scope.$watch(“passw2”, function () {
                    $scope.test();
                });
                $scope.$watch(“passw1”, function () {
                    $scope.test();
                });
                $scope.$watch(“passw0”, function () {
                    $scope.test2();
                });
                $scope.test = function () {
                    if ($scope.passw1 == $scope.passw2) {
                        $scope.error = false;
                        $scope.samePass = true;
                    } else {
                        $scope.error = true;
                        $scope.samePass = false;
                    };
                    if ($scope.fName.length && $scope.lName.length && $scope.passw1.length && $scope.passw2.length) {
                        $scope.incomplete = false;
                    } else {
                        $scope.incomplete = true;
                    };
                };
                $scope.test2 = function () {
                    if (!$scope.selectedId) return false;
                    if ($scope.passw0 != $scope.users[$scope.selectedId – 1].passWord && $scope.passw0) {
                        $scope.oldPass = false;
                    } else {
                        $scope.oldPass = true;
                    }
                };
            });
        </script>
    </body>
</html>

怎样搭建前端开发环境 android web前端开发环境搭建 前端本地开发环境搭建

» 本文来自：前端开发者 » 《前端框架AngularJS综合练习-1》
» 本文链接地址：https://www.rokub.com/5808.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论