我的系统有一个公司有工作，这些工作有属性，例如： - 名称 - 文字 - 工资 - 地点 - 要求 - 工作量
当我添加一个空缺时，我将该作业ID放在数组中，该数组存储在我的数据库中，当我使用该作业的ID进行GET时，数据库会将其作业返回给我。我正在使用ng-repeat来迭代作业数组，但每次添加作业并更新页面时，我在添加的作业上都会出现空白点，之前添加的所有其他作业都是空白的。代码如下：
(function(){
angular.module("jobFinder").controller('companyController', ['$scope', '$location', '$http', function($scope, $location, $http) {
// Definindo objeto que armazena as informações do usuário
$scope.company = {};
$scope.company.jobs = [];
$scope.company.areas = [];
// Adiciona texto principal
this.profileText;
this.addProfileText = function(){
$scope.company.profiletext = this.profileText;
this.profileText = null;
console.log($scope.company.profiletext);
};
// Adiciona trabalho
this.job = {};
this.addJob = function(){
this.job.companyId = localStorage.getItem("userID");
console.log("this.job: " + JSON.stringify(this.job));
$http({method: 'POST', url: '/backend/public/index.php/register/job', data: JSON.stringify(this.job)}).then(function successCallback(response) {
console.log("response: " + response);
}, function errorCallback(response) {
alert('ERROR! CALL THE JÃO!');
});
$scope.company.jobs.push(this.job);
for (var i = 0; i < $scope.company.jobs.length; i++) {
console.log("job[i]: " + $scope.company.jobs[i]);
}
this.job = {};
console.log("jobs: " + $scope.company.jobs);
};
// Adiciona área de atuação
this.area = {};
this.addArea = function(){
$scope.company.areas.push(this.area);
this.area = {};
console.log($scope.company.areas);
};
// Adiciona informações pessoais
this.personal = {};
this.addPersonal = function(){
$scope.company.phone = this.personal.phone;
$scope.company.location = this.personal.location;
this.personal = {};
console.log($scope.company.phone);
console.log($scope.company.location);
};
// Scripts
$scope.$on('$viewContentLoaded', function () {
$('head').append('<script src="js/scrollreveal.min.js"></script>');
$('head').append('<script src="js/jquery.easing.min.js"></script>');
$('head').append('<script src="js/jquery.fittext.js"></script>');
$('head').append('<script src="js/jquery.magnific-popup.min.js"></script>');
$('head').append('<script src="js/creative.js"></script>');
$('head').append('<script src="jasny-bootstrap/js/jasny-bootstrap.js"></script>');
// GET dados do usuário
$http({
method: 'GET',
url: '/backend/public/index.php/company/' + localStorage.getItem("userID")
}).then(function successCallback(response) {
// Todo o conteúdo do usuário é preenchido
console.log("preenchendo dados do usuário...");
$scope.company.name = response.data.name;
$scope.company.profiletext = response.data.text;
// $scope.company.jobs = response.data.jobs;
console.log(response.data.jobs.length);
for (var i = 0; i < response.data.jobs.length; i++) {
$http({
method: 'GET',
url: '/backend/public/index.php/job/' + response.data.jobs[i]
}).then(function successCallback(response) {
$scope.company.jobs[i] = response.data;
console.log("scope.company.jobs[i]: " + JSON.stringify($scope.company.jobs[i]));
console.log("name " + $scope.company.jobs[i].name);
console.log("companyId " + $scope.company.jobs[i].companyId);
console.log("text " + $scope.company.jobs[i].text);
console.log("salary " + $scope.company.jobs[i].salary);
console.log("location " + $scope.company.jobs[i].location);
console.log("requirements " + $scope.company.jobs[i].requirements);
console.log("workload " + $scope.company.jobs[i].workload);
console.log("id " + $scope.company.jobs[i].id);
}, function errorCallback(response) {
alert('ERROR! CALL THE JÃO!');
});
}
$scope.company.areas = response.data.areas;
$scope.company.phone = response.data.phone;
$scope.company.email = response.data.email;
$scope.company.location = response.data.location;
}, function errorCallback(response) {
alert('ERROR! CALL THE JÃO!');
});
});
// Go
$scope.go = function(path) {
$location.path(path);
};
// Tabs
this.tab = 1;
this.isSet = function(checkTab) {
return this.tab === checkTab;
};
this.setTab = function(setTab) {
this.tab = setTab;
};
$scope.update = function() {
$scope.company.id = parseInt(localStorage.getItem("userID"));
$http({method: 'POST', url: '/backend/public/index.php/alter/company', data: $scope.company}).then(function successCallback(response) {
alert("Atualizado com sucesso!");
}, function errorCallback(response) {
alert('ERROR! CALL THE JÃO!');
});
}
}]);
})();
<div class="col-xs-12 well" ng-repeat="job in company.jobs track by $index">
<h3 class="text-uppercase">{{job.name}}</h3>
<p>
{{job.text}}
</p>
<ul>
<li><strong>Salário</strong>: {{job.salary}}</li>
<li><strong>Local</strong>: {{job.location}}</li>
<li><strong>Requisitos</strong>: {{job.requirements}}</li>
<li><strong>Carga horária</strong>: {{job.workload}}</li>
</ul>
<div>
<h4>Interessados</h4>
</div>
</div>
<link rel="stylesheet" href="css/profile.css" type="text/css">
<link rel="stylesheet" href="css/employee.css" type="text/css">
<!-- <link rel="stylesheet" href="jasny-bootstrap/css/jasny-bootstrap.css" type="text/css"> -->
<!-- <link rel="stylesheet" href="css/style.css" type="text/css"> -->
<!-- <a class="navmenu-brand" href="#">LOGO</a> -->
<!-- <div class="photo-filter center-block">
<div class="photo-profile center-block">
</div>
</div>
<div class="text-center name-profile">
<h5>Carmela A. Cosey</h5>
<hr>
</div>
<ul class="nav navmenu-nav">
<li><a href="#"><p><span><i class="fa fa-suitcase" aria-hidden="true"></i></span>Meu currículo</p></a></a></li>
<li><a href="#"><p><span><i class="fa fa-building-o" aria-hidden="true"></i></span>Propostas</p></a></a></li>
<li><a href="#"><p><span><i class="fa fa-cog" aria-hidden="true"></i></span>Configurações</p></a></a></li>
<li><a href="#"><p><span><i class="fa fa-sign-out" aria-hidden="true"></i></span>Sair</p></a></a></li>
</ul> -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ng-click="go('/')">JobFinder</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a ng-click="go('/auth/login')">Exit</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="" ng-class="{ 'active' : companyCtrl.isSet(1) }"><a ng-click="companyCtrl.setTab(1)">Meu perfil</a></li>
<li role="presentation" class="" ng-class="{ 'active' : companyCtrl.isSet(2) }"><a ng-click="companyCtrl.setTab(2)">Editar</a></li>
</ul>
<!--Eu não consegui modularizar as seções de view e edit como eu fiz na página do empregado por falta de tempo-->
<!--view div-->
<div ng-show="companyCtrl.isSet(1)">
<div class="row initial-margin">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<section id="profile" class="well">
<h1>Resumo</h1>
<div class="well">
<h2>Olá, nós somos <strong>{{company.name}}</strong>.</h2>
<p>
{{company.profiletext}}
</p>
</div>
</section>
</div>
</div>
<div class="row" ng-show="company.jobs.length">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 well">
<h2 class="section-title">Oportunidades de emprego</h2>
<div class="col-xs-12 well">
<!--<modal-job></modal-job>-->
<job></job>
</div>
</div>
</div>
<div class="row" ng-show="company.areas.length">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 well">
<h2 class="section-title">Áreas em que atuamos</h2>
<div class="col-xs-12 well">
<operational-areas></operational-areas>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 well">
<h2 class="section-title">Informações básicas</h2>
<div class="col-xs-12 well">
<personal-info></personal-info>
</div>
</div>
</div>
</div>
<!--Edit div-->
<div ng-show="companyCtrl.isSet(2)">
<div class="row initial-margin">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<section id="profile" class="well">
<h1>Resumo</h1>
<div class="well">
<h2>Olá, nós somos <strong>{{company.name}}</strong>.</h2>
<p>
{{company.profiletext}}
</p>
</div>
<introduction-form></introdction-form>
</section>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 well">
<h2 class="section-title">Oportunidades de emprego</h2>
<div class="col-xs-12 well">
<!--<modal-job></modal-job>-->
<job></job>
<job-form></job-form>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 well">
<h2 class="section-title">Áreas em que atuamos</h2>
<div class="col-xs-12 well">
<operational-areas></operational-areas>
<operational-areas-form></operational-areas-form>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 well">
<h2 class="section-title">Informações básicas</h2>
<div class="col-xs-12 well">
<personal-info-form></personal-info-form>
</div>
</div>
</div>
<footer class="text-right saveChanges">
<a class="btn btn-primary" ng-click="update()" role="button">Salvar</a>
</footer>
</div>
</div>
