data bind with arrays - Angularjs

Question

Well, I’m having a little trouble figuring out the best way to solve this:

I have several Skills and need to save each Skill with its score and id(from Skill) for each candidate.

have an ng-repeat listing all the Skills in the candidate form, have the score input, only I’m having difficulties in id input.

thought to create an input, hide it, and fill it with the ids.

but Skill id values are empty using ng-model.

If I remove ng-model, id’s correctly fill in the fields.

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>

Model example of a Skill :

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

Model example of a candidate :

{_id: "56b615193afbfa041a9261b7", Name : "Lucas", About : "Nice guy :B", skills: [{skill : "56b615193afbfa041a9261b6", score : "90"}, {skill : ""56b615193afbfa041a9261b9", score : "70"}]};

Answer 1

Your model can be simplified, making its implementation also simpler.

(There is a small error in your object definition candidate - double quotes (skill : ""56b615193afbfa041a9261b9",[...]). I corrected in the example.)

Click Run code snippet to see it working.

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>