3

Bom, estou com um pouco de dificuldade em pensar qual a melhor maneira de resolver isso:

tenho várias skills e preciso guardar cada skill com seu score e id(da skill) para cada candidato.

tenho um ng-repeat que lista todas as skills no form do candidato, tenho o input do score, só que estou com dificuldades no input do id.

pensei em criar um input, esconde-lo, e preenche-lo com os ids.

porém os valores do id das skill ficam vazios utilizando o ng-model.

Se eu remover o ng-model, os id's preenchem corretamente os campos.

angular.module('Project').controller('CandidateController', function ($scope, $http){

    $scope.skills = [];
    $scope.candidate = {};
    $scope.candidate.skills = [];

    $http.get('/skill')
        .success(function (data){
            $scope.skills = data;
        })
        .error(function(error){
            console.log(error)
        });

    $scope.submit = function(){
        console.log($scope.candidate);
    };

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="form" class="row" ng-submit="submit()">
    <div class="col-md-6">
        <label>Candidate Name</labe>
        <input name="Name" class="form-control" ng-model="candidate.name"></input>

        <label>About Candidate</label>
        <textarea rows="5" cols="20" name="About" ng-model="candidate.about" class="form-control"></textarea>

        <hr> 
    </div>
    <div class="col-md-2">
        <div ng-repeat="skill in skills">
            <label>{{skill.Name}}</label>
            <input ng-model="candidate.skills[$index].score" class="form-control"></input>
            <input ng-model="candidate.skills[$index].skill" class="form-control" ng-value="skill._id"></input>
        </div>
    </div>

        <button type="submit" class="btn btn-primary">
            Save
        </button>

        <a href="/candidates" class="btn btn-primary">Back</a>

</form>

Exemplo de model de uma skill :

{_id: "56b615193afbfa041a9261b6", Name : "Javascript", Description : "Knowledge about javascript"}

Exemplo de model de um candidate :

{_id: "56b615193afbfa041a9261b7", Name : "Lucas", About : "Nice guy :B", skills: [{skill : "56b615193afbfa041a9261b6", score : "90"}, {skill : ""56b615193afbfa041a9261b9", score : "70"}]};
3
  • Tem como adicionar um exemplo da coleção skills, Lucas?
    – OnoSendai
    Commented 8/02/2016 às 14:28
  • {_id : '56b615193afbfa041a9261b6', Name : 'Javascript', Description : 'Knowledge about javascript'}, isso? Commented 8/02/2016 às 14:47
  • Exato. Adicione um set um pouco maior ao corpo da pergunta - isso irá ajudar os colaboradores a visualizar uma solução para seu problema.
    – OnoSendai
    Commented 8/02/2016 às 14:49

1 Resposta 1

5

Seu modelo pode ser simplificado, tornando sua implementação também mais simples.

(Existe um pequeno erro na sua definição do objeto candidate - aspas duplas (skill : ""56b615193afbfa041a9261b9",[...]). Eu corrigi no exemplo.)

Clique em Executar trecho de código para vê-lo funcionando.

var app = angular.module('sampleApp', ['ngResource']);

app.controller('SampleController', function ($scope, $resource) {

  $scope.candidate = 
    {_id:"56b615193afbfa041a9261b7",Name:"Lucas",About:"Nice guy :B",    
     skills: {"56b615193afbfa041a9261b6":"90",
              "56b615193afbfa041a9261b9":"70",
              "56b615193afbfa041a9261bb":"100"},
    };

  $scope.skills = [
    {_id: "56b615193afbfa041a9261b6", Name : "Javascript", Description : "Knowledge about javascript"},
    {_id: "56b615193afbfa041a9261b9", Name : "JQuery", Description : "Knowledge about JQuery"},
    {_id: "56b615193afbfa041a9261ba", Name : "AngularJS", Description : "Knowledge about AngularJS"},
    {_id: "56b615193afbfa041a9261bb", Name : "Nyan", Description : "Knowledge about Nyan"}
  ];

  $scope.doCleanUp = function(){
    //Remove propriedades vazias
    
    var oRef = $scope.candidate.skills;
    
    for (var i in   oRef) {
      if (oRef[i] === null || oRef[i] === undefined || oRef[i] == '') {
        delete oRef[i];
      }
    }    
  };
  
  $scope.criarNovo = function () {
    
  $scope.candidate = { skills: {}};    
    };
  
});
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-resource.js"></script>
<div ng-app="sampleApp">

  <div ng-controller="SampleController">

    <button ng-click='criarNovo()'>Novo Candidato</button>

    <table>
      <tr><td>Nome</td><td><input type='text'ng-model='candidate.Name'/></td></tr>
      <tr><td>Sobre</td><td><input type='text'ng-model='candidate.About'/></td></tr>
      <tr><td>habilidades</td>
        <td>
          <table>
            <tr ng-repeat='s in skills'>
              <td>{{s.Name}}</td><td><input type='text'ng-model='candidate.skills[s._id]' ng-change='doCleanUp()'/></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr><td>Objeto RAW</td>
        <td>
          <pre>{{candidate | json}}</pre>
        </td>
      </tr>
    </table>
  </div>
</div>

4
  • entendi o que você fez, curti, só que acredito que não formulei muito bem minha pergunta, isso ficou legal, só que não resolve meu problema ainda. A ideia era criar um form para criar um candidato. Não pegar um candidato já montado. Mas agradeço o seu tempo e a sua atenção. Muito Obrigado Commented 8/02/2016 às 16:43
  • @LucasFantacucci Alterado para exemplificar um novo candidato.
    – OnoSendai
    Commented 8/02/2016 às 16:49
  • cara, muuuuuuuuuuuuuuuuuuuuuito obrigado. Te amo <3 kkkk Commented 8/02/2016 às 16:52
  • Fico feliz que tenha servido, bom proveito. =)
    – OnoSendai
    Commented 8/02/2016 às 16:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .