Передача объекта в ng-repeat на другую страницу для отображения его содержимого

0

Я работаю над проектом с использованием 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);
            });
    };
});
Теги:
mean-stack

2 ответа

2
Лучший ответ

Приложения AngularJS работают так же, как и обычные веб-сайты, когда речь заходит о навигации. Разница заключается в том, что вместо отправки запроса на сервер для перехода на новый URL-адрес маршрутизатор перехватывает изменение местоположения и переходит к маршруту. Контроллер (или функция разрешения) этого маршрута затем получает то, что ему нужно отобразить.

Итак, что вам нужно в ng-repeat вместо вашей кнопки

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

И тогда вам нужен маршрут, сопоставленный с path /job/:jobId.

В контроллере этого маршрута вы затем сделаете что-то вроде

$http.get('/api/job/' + $routeParams.jobId).then(function(response) {
    $scope.job = response.data;
});
  • 0
    Я ценю ваш ответ! Просто любопытно, потому что я новичок в стеке MEAN, как будет выглядеть SQL-запрос для получения задания по номеру идентификатора в этом маршруте для / job /: jobId?
  • 0
    Вы в замешательстве. Маршрут - это сторона клиента, угловатая вещь. Angular не выполняет SQL-запросов. Что стоит за URL '' / api / job / {jobId} "в вашем бэкэнде, это то, что нужно для выполнения SQL-запроса. Что-то вроде select * from job where id = :jobId .
Показать ещё 2 комментария
0

Как насчет использования 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">

Ещё вопросы

Сообщество Overcoder
Наверх
Меню