Übergabe des Objekts in ng-repeat an eine andere Seite, um den Inhalt anzuzeigen

Question

Ich arbeite an einem Projekt mit MySQL, Angular, Express und Node. Ich habe eine Liste von Objekten in einem ng-repeat und wenn ich auf ein bestimmtes Objekt klicke, möchte ich das angeklickte Objekt an eine andere Seite übergeben und die Eigenschaften des Objekts durch angular anzeigen. Hier

ist der Code:

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> 

Controller:

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 Anwendungen funktionieren auf die gleiche Art und Weise wie normale Web-Sites, wenn es um Navigation geht. Der Unterschied besteht darin, dass der Router anstelle einer Anfrage an den Server, um zu der neuen URL zu gelangen, die Standortänderung abfängt und zu einer Route geht. Der Controller (oder die Auflösungsfunktion) dieser Route erhält dann, was er anzeigen muss.

Also, was Sie in Ihrem ng-repeat statt Ihrer Taste benötigen, ist

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

Und Sie brauchen dann eine Route zum /job/:jobId Pfad zugeordnet.

In der Steuerung dieser Route werden Sie dann wie

etwas tun auf dem wiederholten Element

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

Answer 2

Wie wäre es mit ng klicken und dieses Element in Ihrem Display/geroutet Seite zu extrahieren.

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

In jobPage.html

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