使用ng-repeat angularjs创建了空白div

时间:2016-08-13 22:00:05

标签: javascript angularjs arrays

我的系统有一个公司有工作,这些工作有属性,例如: - 名称 - 文字 - 工资 - 地点 - 要求 - 工作量

当我添加一个空缺时,我将该作业ID放在数组中,该数组存储在我的数据库中,当我使用该作业的ID进行GET时,数据库会将其作业返回给我。我正在使用ng-repeat来迭代作业数组,但每次添加作业并更新页面时,我在添加的作业上都会出现空白点,之前添加的所有其他作业都是空白的。代码如下:

company.js

    (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!');
        });
      }



  }]);
})();

job.html

    <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>

的index.html

    <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>

printscreen of what is happening

0 个答案:

没有答案