AngularJS表格路由

最新推荐文章于 2021-03-22 15:06:43 发布
最新推荐文章于 2021-03-22 15:06:43 发布
阅读量241 收藏
点赞数
分类专栏： 增删改查 web 文章标签： AngularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Key_p/article/details/78055952
版权
<!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="js/angular.js" ></script>
        <script type="text/javascript" src="js/angular-route.js" ></script>
        <script type="text/javascript">
            var app = angular.module("myApp",["ngRoute"]);
            //使用config配置路由规则
            app.config(["$routeProvider",function($routeProvider){
                $routeProvider
                    .when("/addUser",{
                        controller:"addUserCtrl",
                        templateUrl:"addUser.html"
                        })
                    .when("/updatePwd/:name",{
                        controller:"updatePwdCtrl",
                        templateUrl:"updatePwd.html"
                        })
                    .otherwise({redirectTo:"/addUser"});
            }]);
            app.controller("myCtrl",function($scope,$location){
                $scope.ageSize = "";
                $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.goToUrl = function(path){
                    alert(path);
                    $location.path(path);
                }
                
                //年龄范围过滤
                $scope.ageTest = function(age,ageSize){
                    //alert(ageSize);
                    //alert(age);
                    if(ageSize != "--请选择--"){
                        var ages = ageSize.split("-");
                        var ageMin = ages[0];
                        var ageMax = ages[1];
                        if( age<ageMin || age>ageMax ){
                            return false;
                        }else{
                            return true;
                        }
                    }else{
                        return true;
                    }
                }
                
                //批量删除
                $scope.deleteSel = function(){
                    var userNames = [];
                    //遍历users数组，获取状态是选中的user对象的名字
                    for(index in $scope.users){
                        if($scope.users[index].state == true){
                            userNames.push($scope.users[index].name);
                        }
                    }
                    
                    if(userNames.length>0){
                        if(confirm("是否删除选中项？")){
                            for(i in userNames){
                                var name = userNames[i];
                                for(i2 in $scope.users){
                                    if($scope.users[i2].name == name){
                                        $scope.users.splice(i2,1);
                                    }
                                }
                            }
                        }
                    }else{
                        alert("请选择删除项");
                    }
                }
                
            });
            //自定义年龄控制器
            app.filter("ageFilter",function(){
                return function(user){
                    alert(user);
                    /*if(user.age<20 || user.age>22){
                        return null;
                    }else{
                        return user;
                    }*/
                }
            });
            
            //定义添加用户控制器
            app.controller("addUserCtrl",function($scope){
                //alert("添加用户控制器");
                $scope.name = "";
                $scope.pwd = "";
                $scope.pwd2 = "";
                $scope.age = "";
                $scope.sex = "";
                
                $scope.sub = function(){
                    var newUser = {
                        id:$scope.users.length + 1,
                        name:$scope.name,
                        pwd:$scope.pwd,
                        age:$scope.age,
                        sex:$scope.sex
                    }
                    //添加新用户.
                    $scope.users.push(newUser);
                }
            });
            //定义修改用户控制器
            app.controller("updatePwdCtrl",function($scope,$routeParams){
                //alert("修改控制器");
                $scope.name = $routeParams.name;
                $scope.oldPwd = "";
                $scope.pwd1 = "";
                $scope.pwd2 = "";
                //alert($scope.name);
                $scope.updatePwd = function(){
                    //alert(pwd1);
                    /*if($scope.pwd1 != $scope.pwd2){
                        alert("两次密码不一致 ");
                    }*/
                    
                    for(index in $scope.users){
                        //alert($scope.users[index].name);
                        if($scope.users[index].name == $scope.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" ng-model="ageSize" ng-init="ageSize='--请选择--'">
                    <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 ng-click="deleteSel()" 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 " ng-if="ageTest(user.age,ageSize)">
                            <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="goToUrl('/updatePwd/'+user.name)">修改密码</button> </td>
                        </tr>
                    </tbody>
                    
                    
                </table>
            </div><br />
            <button class="addUser" ng-click="goToUrl('/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>

Key_p
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJS实现使用路由切换视图的方法
10-20
在AngularJS中，路由是实现页面视图动态切换的关键机制，允许用户在不刷新整个页面的情况下，根据URL路径加载不同的视图内容。本教程通过一个学生信息管理系统的例子，详细阐述了如何使用AngularJS的路由功能来切换...
angularjs-customers:AngularJS客户表格
05-20
6. **路由**（Routing）：如果项目包含多个视图，AngularJS的`$routeProvider`或`$stateProvider`（如果使用了AngularUI Router）可以帮助我们根据URL导航到不同的视图。这可能用于在客户列表和单个客户详情之间切换...
【Angular】Angular4路由的改变
weixin_33958585的博客
08-25 158
2019独角兽企业重金招聘Python工程师标准>>> ...
修改Angular路由模式
anderlaw的博客
08-09 1895
SPA应用一般有两种：html5 history模式（ http://localhost:4200/user），看起来更加美观，然而如没有后台支持，刷新页面就会报：Cannot GET /pagurl之类的错，一种是Hash模式（ http://localhost:4200/#/user）。 权衡之后，决定将模式改为Hash模式： 引入所需的包： import {HashLocatio...
AngularJs路由切换
qq_40015237的博客
09-20 395
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="jss/angular1.4.6.min.js">script> script src="jss/angular-route.min.js">script> head> body ng-app="myApp
Angular 修改路由策略，改为使用hash路由，即带#号URL
weixin_30249203的博客
09-25 1223
修改app.module.ts如下 转载于:https://www.cnblogs.com/eedc/p/11587296.html
angular4基础之路由
Relax的博客
09-27 1456
路由 Routes ： 路由配置保存着那个url对应着那个组件，以及在那个routerOutlet中展示的信息 RouterOutlet：在HTML中白哦记录有内容呈现位置的指令 Router： 负责在运行时执行路由的对象，可以通过调用其navigate()和navigatgeByUrl()方法来到导航到指定路由 RouterLink：在HTML中声明路由导航用的指令 ActivatedRoute当
angularjs管理系统框架
08-09
6. **路由**：AngularJS 的 $routeProvider 或 $stateProvider（如果使用 AngularUI Router）用于处理页面导航和状态管理。 7. **控制器**：在 MVC 架构中，控制器处理用户输入并更新模型，但现代 AngularJS 开发...
AngularJS视频part1.rar
09-13
这包括AngularJS应用的初始化（`ng-app`指令）、模块（`angular.module`）、控制器（`ng-controller`）、以及视图和路由等概念。 4. **数据与表达式**：AngularJS的数据绑定允许开发者在HTML中直接使用JavaScript...
AngularJS学习笔记
12-08
- **9.1 路由定义**：AngularJS的路由机制允许开发者在单页应用中实现多页面的效果，通过定义不同的路由规则，可以根据URL的变化加载不同的视图。 - **9.2 参数定义**：在路由配置中可以定义动态参数，使得不同URL...
angularjs 路由 $routeProvider
weixin_30843605的博客
12-19 329
Angularjs路由描述：定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。 主界面index.html <!DOCTYPE html> <html> 　　<head></head> 　　<body> 　...
AngularJS动态路由ngRouteProvider
大强博客
05-16 2458
https://github.com/gonzalo123/ngRouteProviderrouter provider for angular jsloading states according to json fileA simple angular application with one state 'home'angular.module('App', ['ui.router']) ...
cms php angularjs,AngularJS动态路由
weixin_39723920的博客
03-22 72
我目前有一个内置路由的AngularJS应用程序。它可以正常工作，并且一切正常。我的app.js文件如下所示：angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).config(['$routeProvider', function ($routeProvider) {$routeProvi...
AngularJS 路由以及模块配置
11-19 9899
AngularJS 路由-参数,模块配置,布局模板 body { padding: 0; margin: 0; background-color: #F7F7F7; font-family: Arial; } .wrapper { max-width: 980px; margin: 50px auto; } ul { paddi
AngularJs增删改查
L59_1的博客
12-18 682
AngularJs的增删改查,排序,全选全不选,批量删除<script type="text/javascript" src="../js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("myApp",[]); app.
angularjs的增删改查
changten的博客
11-19 326
angularjs自己定义一个数组 var app = angular.module("myApp", []);   app.controller("myCtrl", function($scope) {       $scope.user= [/*{               "id": 1,               "name": "张三1",              
AngularJs实现增,删,改,查(全)
baipenggui_bo
12-18 3306
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> <...
Angularjs 增删改查1
Star_Q的博客
09-20 413
综合练习 .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } var app = angular.module("myApp",["ngRoute"]); //使用config配置路由规则 app.config(["$ro
angularJS简易增删改查
梵韵
03-30 642
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, u
angularjs路由
最新发布
09-01
AngularJS 路由是用于在单页应用程序中实现页面导航的机制。它允许你根据 URL 的变化加载不同的视图和控制器，而无需刷新整个页面。 要使用 AngularJS 路由，首先需要在你的应用程序中引入 `angular-route.js` 文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值