Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/367.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何以角度获取动态表单字段值?_Javascript_Jquery_Angularjs - Fatal编程技术网

Javascript 如何以角度获取动态表单字段值?

Javascript 如何以角度获取动态表单字段值?,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,下面我已经添加了动态表单添加和删除提交后我想得到所有的表单值。我怎么做??有人帮我前进吗 这是我的JSFIDLE链接 下面我加上了我的鳕鱼 var-app=angular.module('angularjs-starter',[]); 应用程序控制器('MainCtrl',函数($scope){ $scope.choices=[{id:'choice1'}]; $scope.addNewChoice=函数(){ var newItemNo=$scope.choices.length+1; $

下面我已经添加了动态表单添加和删除提交后我想得到所有的表单值。我怎么做??有人帮我前进吗

这是我的JSFIDLE链接

下面我加上了我的鳕鱼

var-app=angular.module('angularjs-starter',[]);
应用程序控制器('MainCtrl',函数($scope){
$scope.choices=[{id:'choice1'}];
$scope.addNewChoice=函数(){
var newItemNo=$scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice=函数(){
var lastItem=$scope.choices.length-1;
$scope.choices.splice(最后一项);
};
$scope.OnSave=函数(){
console.log('sjs');
};
});
字段集{
背景:#fcfc;
填充:16px;
边框:1px实心#d5d5;
}
addfields先生{
利润率:10px0;
}
#精选展示{
填充:10px;
背景:rgb(227250227);
边框:1px实心rgb(171239171);
颜色:rgb(9,56,9);
}
.移除{
背景:#C76868;
颜色:#FFF;
字体大小:粗体;
字号:21px;
边界:0;
光标:指针;
显示:内联块;
填充:4px9px;
垂直对齐:顶部;
线高:100%;
}
输入[type=“text”],
挑选{
填充物:5px;
}

添加字段

名称

电子邮件

添加问题

问题顺序 -

提交


{{choices}}
保存上的功能需要更改为:

$scope.OnSave = function() {
  var result = {
    name: $scope.name,
    email: $scope.email,
    questions: $scope.choices.map(function(choice) {
      return { question: choice.name, questionorder: choice.order };
    })
  };

  console.log(result);
};
结果将包含所需的结果。或者,可以更改数据在模型中的保存方式。您可以创建一个变量
$scope.data
,如下所示:

$scope.data = {
  name: '',
  email: '',
  questions: [
    {
      id: 'choice1'
    }
  ]
};
然后将您的HTML绑定到此。这样,您就不需要在保存时再次准备结果数据。工作小提琴是。

//html
添加字段
名称

电子邮件

添加问题

问题顺序 -

提交


{{obj}} //js var app=angular.module('angularjs-starter',[]); 应用程序控制器('MainCtrl',函数($scope){ $scope.choices=[{id:'choice1'}]; $scope.addNewChoice=函数(){ var newItemNo=$scope.choices.length+1; $scope.choices.push({'id':'choice'+newItemNo}); }; $scope.removeChoice=函数(){ var lastItem=$scope.choices.length-1; $scope.choices.splice(最后一项); }; $scope.OnSave=函数(形式,选项){ $scope.formData=[]; $scope.formData.push({ name:form.name, 电子邮件:form.email, 问题:选择 }); log($scope.formData); }; });
var-app=angular.module('angularjs-starter',[]);
应用程序控制器('MainCtrl',函数($scope){
$scope.obj={
名称:“”,
电子邮件:“”,
问题:[]
};
var emptyObj={
问题:“,
问题顺序:“,
选项:[]
};
var emptyOption={
瓦尔:“,
关键字:“
};
$scope.addNewChoice=函数(){
$scope.obj.questions.push(angular.copy(emptyObj));
};
$scope.removeChoice=函数(索引){
$scope.obj.questions.splice(索引1);
};
$scope.addOptions=函数(索引){
if($scope.obj.questions[index].options.length==6){
警报(“最多允许6个选项”);
返回;
}
$scope.obj.questions[index].options.push(angular.copy(emptyOption));
};
$scope.removeOption=函数(parentIdx,索引){
$scope.obj.questions[parentIdx].options.splice(索引,1);
};
$scope.OnSave=函数(){
console.log('sjs');
}; 
});
字段集{
背景:#fcfc;
填充:16px;
边框:1px实心#d5d5;
}
addfields先生{
利润率:10px0;
}
#精选展示{
填充:10px;
背景:rgb(227250227);
边框:1px实心rgb(171239171);
颜色:rgb(9,56,9);
}
.移除{
背景:#C76868;
颜色:#FFF;
字体大小:粗体;
字号:21px;
边界:0;
光标:指针;
显示:内联块;
填充:4px9px;
垂直对齐:顶部;
线高:100%;
}
输入[type=“text”],
挑选{
填充物:5px;
}

添加字段
名称 电子邮件

添加问题 添加选项

问题顺序 -
-

提交


{{obj|json}
更新了JSFIDLE OnSave函数,我应该得到预期结果@Jayant Patilcheck your fiddle.add fields函数不可用working@itsme--您忘记了
var app=angular.module('angularjs-starter',[])在JS文件中。添加这一行作为第一行。不。我想在这里再次讨论一件事,我需要添加一个按钮“添加选项”,带有两个字段(添加选项,选项顺序){“名称”:“测试”,“电子邮件”:as@gmail.com“,”问题“:[{”问题“:“以下哪项是主管最重要的特征?”,”问题顺序“:“1”,“选项”:[{“val”:“可接近”,“key”:“options1”},{“val”:“合格”,“key”:“options3”},{“val”:“诚实”,“key”:“options2”}]}}你为什么离开聊天室?请解释代码中发生了什么。它提供了更清晰和更好的理解。我在ng模型(form.name和form.email)中使用了“form”,然后在OnSave(form,choices)函数中传递了这个“form”和“choices”。然后在js file OnSave函数中,我创建了一个数组$scope.formData,并将name和email与choice一起推送。在html文件ng repeat=“obj In formData”中,只需查看我打印的数据{{{obj}}。希望有帮助。这样更好,你应该编辑你的答案并将此评论粘贴到
//html
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<button class="addfields" ng-click="addNewChoice()">Add fields</button><br>
                <label class="control-label col-sm-2">name</label>
                      <input type="text" ng-model="form.name" name="" placeholder="Add name"><br><br>
                <label class="control-label col-sm-2">email</label>
                      <input type="text" ng-model="form.email" name="" placeholder="Add emalil"><br><br>
   <fieldset  data-ng-repeat="choice in choices">

       <label class="control-label col-sm-2">Add Question</label>

                      <input type="text" ng-model="choice.name" name="" placeholder="Add Question"><br><br>


       <label class="control-label col-sm-2">Question order</label>
        <input type="text" ng-model="choice.order" name="" placeholder="Add Question order">


      <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
   </fieldset><br><br>


                <button type="submit" class="btn btn-primary"  ng-click="OnSave(form, choices)">Submit</button><br><br><br>

   <div id="choicesDisplay" ng-repeat="obj in formData">
      {{ obj }}
   </div>
</div>

//js

var app = angular.module('angularjs-starter', []);

  app.controller('MainCtrl', function($scope) {

  $scope.choices = [{id: 'choice1'}];

  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push({'id':'choice'+newItemNo});
  };

  $scope.removeChoice = function() {
    var lastItem = $scope.choices.length-1;
    $scope.choices.splice(lastItem);
  };
  $scope.OnSave = function(form, choice) {
        $scope.formData = [];
      $scope.formData.push ({
        name: form.name,
        email: form.email,
        questions: choice
      });
      console.log($scope.formData);
  };

});