无法在angularjs中找到动态创建的字段的范围

Question

I am trying to create the form in which user can dynamically add the input field by pressing the button. but I am not able to fetch the value of that input field to controller? The following is my form:

<div ng-repeat="skill in skill_set">
    <label>Skill-name</label>
    <input type="text"name="" ng-model="skill.sName" placeholder="enter your skills here">
    <button class="remove" ng-show="$last" ng-click="removeSkill()">-</button>
</div>
    <button type="button" ng-click="addNewSkill()">Add more Skills</button>
    <a ui-sref="/"  ng-click="createMeetup()"> Next Section </a>

my controller is defined as follows:

var app = angular.module('meetupApp', ['ngResource','ui.router']);
app.controller('mainCrl', ['$scope', '$resource', '$location', function ($scope, $resource, $location) {
  $scope.skill_set = [{id: 'skill1'}];

  $scope.addNewSkill = function() {
    var newItemNo = $scope.skill_set.length+1;
    $scope.skill_set.push({'id':'skill'+newItemNo});
    };

  $scope.removeSkill = function() {
    var lastItem = $scope.skill_set.length-1;
    $scope.skill_set.splice(lastItem);
    };

  $scope.createMeetup = function () {
    var employee = new Employee();
    console.log("the skill set is"+ $scope.skill_set.sName);
    employee.skills =[{skill_name: $scope.skill_set.sName}] ;
    employee.$save();
    };
}]);

Employee is the mongodb document where skills is array of skill_name. When I am consoling the skill set. it showing me "the skill set is undefined" how do I get the value from input field to controller? Small piece of help is really appreciated!!!!

Answer 1

You are filling sName during iteration. So if you wan't to reach a skill name, the code would look like $scope.skill_set[iteration].sName

If you wan't an array of skill name, make a loop over skill_set to create the proper array.

---

But it would be easier to manipulate your $scope with ng-model="skill.skill_name"

And assign employee.skills = $scope.skill_set;

You did add an id to the model, to keep it clean, you must avoid using Id property, so add new items with: $scope.skill_set.push({'skill_name':''+});

$scope.skill_set should look like

[
      {'skill_name' : "skillname1"},
      {'skill_name' : "skillname2"},
      {'skill_name' : "skillname3"}
]

Or if you want an array with only skill names

var skillNames = [];
for (skill in $scope.skill_set)
{
    skillNames.push(skill.skill_Name);
}
 employee.skills = {'skill_name' : skillNames};

And employee.skills would look like

{ 'skill_name' : [ "skillname1", "skillname2", "skillname3" ]}

---

V2 : code clean

But it would be easier to manipulate your $scope with ng-model="skill"

And assign employee.skills = {'skill_name' : $scope.skill_set};

You did add an id to the model, to keep it clean, you must avoid using Id property, so add new items with: $scope.skill_set.push({''});

And employee.skills would look like

{ 'skill_name' : [ "skillname1", "skillname2", "skillname3" ]}

---

I keep first solution, because i'm not sure of what kind of data format you need.