data bind with Arrays - AngularJS

Question

data bind with Arrays - AngularJS

Navigation

#1 by (5 votes)

3

Well, I'm having a hard time figuring out the best way to resolve this:

I have several skills and I need to save each skill with your score and skill id for each candidate.

I have a ng-repeat that lists all the skills in the form of the candidate, I have the input of the score, but I'm having difficulty inputting the id.

I thought about creating an input, hiding it, and filling it with ids.

but the skill id values are empty using ng-model.

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

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><formname="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>

Example of a skill model:

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

Sample candidate model:

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

javascript html angularjs

asked by anonymous 08.02.2016 / 15:21

1 answer

Faster way to add an item to a list, use a structure Pass Cursor to the Next Field of the Form

score 5 · Accepted Answer

Your model can be simplified, making your implementation simpler as well.

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

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