• angularjs路由传值$routeParams


    AngularJS利用路由传值,  

      1.导包

     <script src="angular.min.js"></script>
        <script src="angular-route.js"></script>

      2.依赖注入ngRoute

    var myapp=angular.module("myapp",["ngRoute"]);

      3.配置路由

    myapp.config(function ($routeProvider) {
                //页面选择
                $routeProvider.when("/home",{
    //                template:"<h2>这是主页面</h2>"
                    templateUrl:"home.html"
                }).when("/about",{
    //                template:"<h2>这是关于我们的信息</h2>"
                    templateUrl:"about.html"
                }).when("/cel",{
    //                template:"<h2>请联系我们</h2>"
                    templateUrl:"cel.html",
    //                controller:"celCtrl"
                }).when("/cel/:sub",{//传参数
                    templateUrl:"cel.html",
                    controller:"celCtrl"
                })
            });

      4.写cel的控制器

     myapp.controller("celCtrl",function ($scope,$routeParams) {
                //根据传过来的参数给输入框赋值
               var param = $routeParams["sub"];
               if(param=="a"){
                   $scope.mname="我想提建议...";
               }else if(param=="b"){
                   $scope.mname="我想购买..."
               }
            });

      5.通过about页面传值给cel页面

    <p>About页面</p>
        <ul>
            <li><a href="#cel/a">告诉我们</a></li>
            <li><a href="#cel/b">询价</a></li>
    
        </ul>

      修改cel页面的输入框的值

    <p>显示页面</p>
        <ul>
            <li><input type="text" placeholder="sub" ng-model="mname"></li>
            <li><input type="text" placeholder="Message" ng-model="minfo"></li>
        </ul>

      最后是页面布局

    <body ng-app="myapp">
    <!--页面布局-->
        <header>
            <p>我的站点</p>
            <div>
                <a href="#home">主页</a>
                <a href="#about">关于我们</a>
                <a href="#cel">联系我们</a>
            </div>
        </header>
        <div ng-view="" class="View"></div>
    </body>

    看看效果:

      

  • 相关阅读:
    C# 设计原则-单一职责原则
    C# Linq的简单运用
    .Net Core中的管道机制
    .Net Core和.Net Framework的区别
    C# 9.0 新特性简析
    .Net core的依赖注入
    .Net IOC容器unity的使用
    网站被黑客攻击百度出现警示
    七牛云免费对象存储(解决图片加载缓慢问题)
    今天第一篇博客 说点随意的内容
  • 原文地址:https://www.cnblogs.com/xjean/p/7522538.html
Copyright © 2020-2023  润新知