单击锚标记时角度传递值到不同的页面

时间:2015-11-20 14:28:32

标签: javascript html angularjs url-routing

我使用角度单页应用程序并且被击中是特别的地方。索引页面由ng-view

组成

我从json文件中获取值到我的主页中,该主页显示在表中,每个名称都用锚标记覆盖

  <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 />

我们可以观察到用锚标记括起来的第一个表数据。

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

我的关于页面如下所示

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

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

请帮我把数据从一个页面转到另一个页面。

感谢任何帮助

1 个答案:

答案 0 :(得分:2)

如果你需要的只是人名,你可以使用$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变量添加到about控制器:

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