Я работаю над проектом с использованием 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);
});
};
});
Приложения 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;
});
Как насчет использования 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">
select * from job where id = :jobId
.