angular 单击锚标记时将值从传递到不同的页面

Question

我正在使用 angular 单页应用程序，我感到很特别。索引页包括 ng-view

我从 json 文件中获取价值到我的主页，如 table 所示，每个名称都覆盖有锚标记

  <h2 class="text-center">{{message}}</h2>
    <div class="container">

      <table class="table table-striped">

        <tbody>
          <tr ng-repeat = 'row in rows'>
            <td><a href="#about">{{row.name}}<a></td>
            <td>{{ row.phone}}</td>
            <td>{{row.time}} </td>  
          </tr>

        </tbody>
      </table>
    </div>
    <hr />

我们可以观察到第一个 table 数据包含在锚标记中。

当我点击锚标签时，我希望它重定向到关于页面，我点击的名字应该显示在关于页面

我的关于页面如下所示

<div class="jumbotron text-center">
        <h5>{{message}}</h5>
     hi {{row.name}}
    </div>

http://plnkr.co/edit/4VT5kr41zJZIphiS7q9L?p=preview

请帮我把数据从一页移到另一页。

感谢任何帮助

Answer 1

如果您只需要人名，可以使用 $routeParams 传递。

在 html 中，您可以像这样编写链接：

<a href="#about/{{row.name}}">{{row.name}}<a>

然后像这样编辑 about 路线：

// route for the about page
            .when('/about/:person', {
                templateUrl : 'pages/about.html',
                controller  : 'aboutController'
            })

并将$scope.person变量添加到关于控制器：

scotchApp.controller('aboutController', function($scope, $routeParams) {
        $scope.message = 'Clicked person name from home page should be dispalyed here';
        $scope.person = $routeParams.person;
    });

最后，about.html 视图：

<div class="jumbotron text-center">
    <h5>{{message}}</h5>
 hi {{person}}
</div>

演示：http://plnkr.co/edit/v1mdvmSQ6pE1oxYAdyKi?p=preview

文档：https://docs.angularjs.org/api/ngRoute/service/$routeParams

angular 单击锚标记时将值从传递到不同的页面

angular passing value from to different page when anchor tag is clicked

html

javascript

url-routing

angularjs