Javascript 已使用ng repeat angularjs创建空白div

我的系统有一个包含作业的公司，这些作业具有属性，例如： -名字 -正文 -薪水 -位置 -要求 -工作量

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

company.js

（函数（）{
angular.module（“jobFinder”）.controller（'companyController'，['$scope'，'$location'，'$http'，函数（$scope，$location，$http）{
//将armazena对象定义为usuário的信息
$scope.company={}；
$scope.company.jobs=[]；
$scope.company.areas=[]；
//Adiciona texto校长
这篇文章；
this.addProfileText=函数（）{
$scope.company.profiletext=this.profiletext；
this.profileText=null；
log（$scope.company.profiletext）；
};
//阿迪西奥纳·特拉巴略酒店
this.job={}；
this.addJob=函数（）{
this.job.companyId=localStorage.getItem（“userID”）；
log（“this.job:+JSON.stringify（this.job））；
$http（{method:'POST'，url:'/backend/public/index.php/register/job'，data:JSON.stringify（this.job）}）{
console.log（“响应：+响应”）；
}，函数errorCallback（响应）{
警报（“错误！呼叫JÃO！”）；
});
$scope.company.jobs.push（this.job）；
对于（变量i=0；i<$scope.company.jobs.length；i++）{
log（“作业[i]：”+$scope.company.jobs[i]）；
}
this.job={}；
log（“作业：+$scope.company.jobs”）；
};
//阿图阿多阿迪西奥纳雷酒店
this.area={}；
this.addArea=函数（）{
$scope.company.areas.push（此区域）；
this.area={}；
console.log（$scope.company.areas）；
};
//Adiciona informações pessoais
this.personal={}；
this.addPersonal=函数（）{
$scope.company.phone=this.personal.phone；
$scope.company.location=this.personal.location；
this.personal={}；
console.log（$scope.company.phone）；
log（$scope.company.location）；
};
//剧本
$scope.$on（“$viewContentLoaded”，函数（）{
$（'head'）。追加（''）；
$（'head'）。追加（''）；
$（'head'）。追加（''）；
$（'head'）。追加（''）；
$（'head'）。追加（''）；
$（'head'）。追加（''）；
//让护墙板做usuário
$http({
方法：“GET”，
url:'/backend/public/index.php/company/'+localStorage.getItem（“userID”）
}).then（函数成功回调（响应）{
//托多·奥康托多·杜乌苏·里奥·先先哲多
console.log（“Preensendo dados do usuário…”）；
$scope.company.name=response.data.name；
$scope.company.profiletext=response.data.text；
//$scope.company.jobs=response.data.jobs；
log（response.data.jobs.length）；
对于（var i=0；i

job.html

{{job.name}

{{job.text}


Salário：{{job.salary}
本地：{{job.location}
请购单：{{job.requirements}
Carga horária：{{job.workload}

兴趣爱好

index.html

切换导航
我不明白你的问题，你能澄清一下吗？为什么我的ng重复出现了
    (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>