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

时间:2015-06-03 16:20:12

标签: javascript angularjs node.js mongodb

我正在尝试创建一个表单,用户可以通过按下按钮动态添加输入字段。但是我无法将该输入字段的值提取给控制器? 以下是我的表格:

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

我的控制器定义如下:

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是mongodb文档,其中技能是skill_name数组。 当我安慰技能组合时。它告诉我“技能组合未定义” 如何从输入字段获取值到控制器? 小小的帮助非常感谢!!!!

1 个答案:

答案 0 :(得分:0)

您在迭代期间填充sName。因此,如果您想要获得技能名称,则代码看起来像$scope.skill_set[iteration].sName

如果您想要一个技能名称数组,请在skill_set上创建一个循环以创建正确的数组。

但使用ng-model="skill.skill_name"

操作$ scope会更容易

并指定employee.skills = $scope.skill_set;

您确实在模型中添加了ID,为了保持其清洁,您必须避免使用Id属性,因此请添加以下新项:$scope.skill_set.push({'skill_name':''+});

$scope.skill_set应该看起来像

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

或者,如果您想要一个只有技能名称的数组

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

employee.skills看起来像

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

V2:代码清理

但使用ng-model="skill"

操作$ scope会更容易

并指定employee.skills = {'skill_name' : $scope.skill_set};

您确实在模型中添加了ID,为了保持其清洁,您必须避免使用Id属性,因此请添加以下新项:$scope.skill_set.push({''});

employee.skills看起来像

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

我保留第一个解决方案,因为我不确定您需要什么样的数据格式。