将 ng-repeat 中的 Object 传递到另一个页面以显示其内容

Question

我正在使用 MySQL、Angular、Express 和 Node 开发一个项目。我在 ng-repeat 中有一个对象列表，当我单击特定项目时，我想将单击的对象传递到另一个页面并通过 angular.

显示对象的属性

代码如下：

HTML:

<div class = "panel panel-info" ng-repeat="job in job">
    <div class = "panel-heading clickable">
        <h1 class = "panel-title">{{job.title}}</h1>
        <span class = "pull-right"><i class = "glyphicon glyphicon-minus"></i></span>
    </div>
    <div class = "panel-body">
        <!--This will soon be the place where the Students information is placed by NodeJS-->
        <!--<p style = "text-decoration: underline"> Job Title  <p>-->
        <p> {{job.description}} </p>
        <p> {{job.first_name}} {{job.last_name}}</p>
        <p> {{job.location}} </p>
        <br>
        <div class="form-group">
            <div class=" col-sm-15">
                <button onclick="location.href='jobPage.html';" type="submit" class="btn btn-default btn-block">Apply</button>
            </div>
        </div>

    </div>

</div>

控制器：

    soopControllers.controller("landingController",

function ($scope, $http){
    $scope.formData = {};

    $http.get('/api/jobLanding')
        .success(function(data){
            $scope.job = data;
            console.log(data);
        })
        .error(function(data){
            console.log('Error: ' + data);
        });

    //I want this function to get the job and send it to another page
    $scope.getJob = function(){
        $http.post('/api/job', $scope.formData)
            .success(function(data){
                $scope.formData = {};
                $scope.users = data;
                //$location.redirect();
                console.log(data);
            })
            .error(function(data){
                console.log('Error: ' + data);
            });
    };
});

Answer 1

AngularJS 应用程序在导航方面与常规网站的工作方式相同。不同之处在于，路由器不是向服务器发送请求去新的 URL，而是拦截位置变化，然后去路由。该路由的控制器（或解析函数）然后获取它需要显示的内容。

所以，你需要在你的 ng-repeat 中而不是你的按钮是

<a ng-href="#/job/{{ job.id }}">Apply</a>

然后您需要一个映射到路径 /job/:jobId.

的路由

在此路线的控制器中，您将执行类似

的操作

$http.get('/api/job/' + $routeParams.jobId).then(function(response) {
    $scope.job = response.data;
});

Answer 2

如何使用 ng-click 重复的元素并在您的 display/routed 页面中提取该元素。

<div ng-controller="plandingController"
     class = "panel panel-info" 
     ng-repeat="job in job"
     ng-click="value.val=job">
....
</div>

在jobPage.html

<div ng-controller="plandingController" ng-repeat="pickedjob in value.val">

将 ng-repeat 中的 Object 传递到另一个页面以显示其内容

Passing Object in ng-repeat to another page to display its contents

html

mysql

node.js

angularjs

mean-stack