【问题标题】:how do i display data on next page when form was submitted?提交表单时如何在下一页显示数据?
【发布时间】:2015-08-28 01:07:40
【问题描述】:

我是 angularjs 新手,我在 plunker 上创建了一个示例应用程序,我试图显示用户在其他页面上提交后输入的数据。当用户单击提交按钮时,应显示用户数据页面并给出所有数据按用户显示在那里。 这是我的示例应用 index.html:

       <!DOCTYPE html>

        <!-- define angular app -->
         <html ng-app="scotchApp">

         <head>
          <!-- SCROLLS -->
         <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
         <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

        <!-- SPELLS -->
         <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
         <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
         <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
         <script src="script.js"></script>
          <script src="homeDirective.js"></script>
       </head>

          <!-- define angular controller -->
        <body ng-controller="mainController">

          <nav class="navbar navbar-default">
           <div class="container">
           <div class="navbar-header">
           <a class="navbar-brand" href="/">Angular Routing Example</a>
         </div>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
           <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
           <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
          </ul>
       </div>
        </nav>

        <div id="main">

        <!-- angular templating -->
        <!-- this is where content will be injected -->
         <div ui-view></div>

         </div>

         <footer class="text-center">
               View the tutorial on <a href="http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating">Scotch.io</a>
         </footer>

         </body>

       </html>

【问题讨论】:

    标签: angularjs forms angularjs-directive angular-ui-router


    【解决方案1】:

    一个简单的方法是使用一个在提交时更新的变量将提交的表单数据存储在服务中。

    然后在路由更改时,路由器可以通过在加载下一个视图之前向该服务发出请求来解析表单数据,从而使其可用于下一个控制器。

    希望能帮到你!

    【讨论】:

    • 你能把这个添加到我的插件中吗?我想点击提交用户页面将打开,所有数据都显示在那里
    • 恐怕我不能为你做这件事。这是您需要自己实现的东西。但是,使用服务将是您的目标的正确方法。
    • 如果您想了解这个概念以及您可以使用的各种方法,而不是在我已经解释过的同一上下文中的另一个问题中,您可以使用 plunker check 它。
    猜你喜欢
    • 2012-07-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多