Question

我正在使用MySQL，Angular，Express和Node开展项目。我有一个ng-repeat中的对象列表，当我点击一个特定的项目时，我想将点击的对象传递给另一个页面，并通过角度显示对象的属性。

以下是代码：

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并在显示/路由页面中提取该元素。

<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中的对象传递到另一个页面以显示其内容

2 个答案: