angularJS/路由实现增删改查

最新推荐文章于 2019-12-14 14:44:57 发布

By_Weicy

最新推荐文章于 2019-12-14 14:44:57 发布

阅读量547

点赞数

文章标签： angularjs 路由

本文链接：https://blog.csdn.net/weikai_/article/details/78312313

版权

安卓基础/混合开发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .addUser{
            width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;
        }
    </style>
    <script type="text/javascript" src="angular.js" ></script>
    <script type="text/javascript" src="angular-route.js" ></script>
    <script type="text/javascript">
        var app = angular.module("myApp",["ngRoute"]);
        //定义路由规则
        app.config(["$routeProvider",function($routeProvider){
            $routeProvider
                .when("/addUser",{//添加用路由地址
                    controller:"addCtrl",
                    templateUrl:"addUser.html"
                })
                .when("/updatePwd/:name",{//修改密码用路由地址
                    controller:"updateCtrl",
                    templateUrl:"updatePwd.html"
                })
                .otherwise({redirectTo:"/addUser"});
        }]);
        app.controller("myCtrl",function($scope,$location){
            $scope.users = [
                {"id":1,"name":"张三","pwd":"123","age":22,"sex":"男","state":false},
                {"id":2,"name":"李四","pwd":"456","age":33,"sex":"女","state":false},
                {"id":3,"name":"王五","pwd":"789","age":44,"sex":"男","state":false}
            ];
            //给按钮添加点击事件，根据传过来的参数，判断跳转到的路由地址
            $scope.goToPath = function(path){
                alert(path);
                $location.path(path);
            }
        });
        //添加用户控制器
        app.controller("addCtrl",function($scope){
            $scope.name = "";//双向数据绑定，获得页面输入的新用户信息
            $scope.pwd = "";
            $scope.age = "";
            $scope.sex = "";
            $scope.sub = function(){
                //遍历数据源，拿到最大的用户id
                $scope.idMax = 0;
                for(index in $scope.users){
                    if($scope.users[index].id > $scope.idMax){
                        $scope.idMax = $scope.users[index].id;
                    }
                }
                //创建新用户对象
                var user = {
                    id:$scope.idMax+1,
                    name:$scope.name,
                    pwd:$scope.pwd,
                    age:$scope.age,
                    sex:$scope.sex
                };
                //把新获得的用户对象添加到数据库数组中
                $scope.users.push(user);
            }
        });
        //修改密码控制
        app.controller("updateCtrl",function($scope,$routeParams){
            var name = $routeParams.name;//获得要修改的用户的用户名
            $scope.name = name;//将要修改用户的名字，赋值给双向数据绑定的页面用户名显示。
            $scope.pwd1 = "";//双向数据绑定用户输入的新密码

            //点击修改密码按钮，执行修改密码方法
            $scope.updatePwd = function(){
                //遍历数据源，通过比较数据源中用户名跟参数要修改的用户名一致，进行密码修改
                for(index in $scope.users){
                    if($scope.users[index].name == name){
                        //获得用户输入的密码，赋值给当前用户要修改的新密码。
                        $scope.users[index].pwd = $scope.pwd1;
                    }
                }
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
    <h3>用户信息表</h3>
    <div>
        <input placeholder="用户名查询" size="10" />&nbsp;
        <!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" size="10"/>-->
        年龄：<select id="age">
        <option>--请选择--</option>
        <option>11-20</option>
        <option>21-30</option>
        <option>31-40</option>
        <option>41-50</option>
        <option>51-60</option>
    </select>&nbsp;
        性别：<select>
        <option>男</option>
        <option>女</option>
    </select>&nbsp;
        <input type="button" value="全部删除" />
        <input type="button" value="批量删除" />
    </div><br />
    <div>
        <table border="1" cellspacing="1" cellpadding="10">
            <thead>
            <tr>
                <th><input type="checkbox" /> </th>
                <th>id</th>
                <th>用户名</th>
                <th>密码</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="user in users ">
                <td><input ng-model="user.state" type="checkbox"/></td>
                <td>{{user.id}}</td>
                <td>{{user.name }}</td>
                <td>{{user.pwd}}</td>
                <td>{{user.age }}</td>
                <td>{{user.sex}}</td>
                <td><button ng-click="goToPath('/updatePwd/'+user.name)">修改密码</button> </td>
            </tr>
            </tbody>
        </table>
    </div><br />
    <button class="addUser" ng-click="goToPath('/addUser')">添加用户</button><br /><br />


    <!-- 1.添加用户页面 -->
    <script type="text/ng-template" id="addUser.html">
        <form action="">
            <table border="1" cellspacing="1" cellpadding="10">
                <tr>
                    <th>用户名：</th>
                    <td><input ng-model="name" placeholder="请输入用户名" /></td>
                </tr>
                <tr>
                    <th>密　码：</th>
                    <td><input ng-model="pwd" placeholder="请输入密码" /></td>
                </tr><tr>
                <th>年　龄：</th>
                <td><input ng-model="age" placeholder="请输入年龄" /></td>
            </tr><tr>
                <th>性　别：</th>
                <td><input ng-model="sex" placeholder="请输入性别" /></td>
            </tr>
                <tr align="center">
                    <td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
                </tr>
            </table>
        </form>
    </script>
    <!-- 2.修改用户信息页面 -->
    <script type="text/ng-template" id="updatePwd.html">
        <form>
            <table border="1" cellspacing="1" cellpadding="10">
                <tr>
                    <th>用户名：</th>
                    <td><input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td>
                </tr>
                <tr>
                    <th>旧密码：</th>
                    <td><input ng-model="oldPwd" placeholder="请输入密码" /></td>
                </tr><tr>
                <th>新密码：</th>
                <td><input ng-model="pwd1" placeholder="请输入年龄" /></td>
            </tr><tr>
                <th>确　认：</th>
                <td><input ng-model="pwd2" placeholder="请输入性别" /></td>
            </tr>
                <tr align="center">
                    <td colspan="2"><input type="button" value="提交" ng-click="updatePwd()" /></td>
                </tr>
            </table>
        </form>
    </script>


    <!-- 6.指定相应内容 -->
    <div ng-view>

    </div>
</center>
</body>
</html>

By_Weicy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularJS/路由实现增删改查

html>html>head> meta charset="UTF-8"> title>综合练习title> style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } style>
复制链接

扫一扫