当锚标记被单击时，角值从一个页面传递到另一个页面

I'm using angular single page application and is struck is particular place. Index page consist of ng-view

我使用的是角度单一的页面应用程序，它是特定的位置。索引页由ng-view组成

I'm getting value from json file into my home page which is shown in table and each name is covered with anchor tag

我正在从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 />

As we can observe that first table data enclosed with anchor tag.

我们可以观察到包含锚标记的第一个表数据。

when I click on the anchor tag, I want the it to redirect to about page and the name I clicked should be displayed in about page

当我单击锚标记时，我希望it重定向到about page，我单击的名称应该显示在about page中

My about page is shown below

我的about页面如下所示。

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

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

Please help me out getting data from one page to another.

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

Any help is appreciated

任何帮助都是赞赏

1 个解决方案

#1

If all you need is the person name, you can pass it using $routeParams.

如果您需要的只是人名，那么可以使用$routeParams传递它。

In the html you can write links just like:

在html中，你可以这样写链接:

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

and then edit the about route just like:

然后编辑about path:

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

and add the $scope.person variable to the about controller:

并添加美元范围。about controller的person变量:

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

finally, the about.html view:

最后,关于。html视图:

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

Demo: http://plnkr.co/edit/v1mdvmSQ6pE1oxYAdyKi?p=preview

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

Docs: https://docs.angularjs.org/api/ngRoute/service/$routeParams

文档:https://docs.angularjs.org/api/ngRoute/service/ routeParams美元

1 个解决方案

#1

更多相关文章

随机推荐