如何添加与angularjs动态字段 [英] How to add dynamic fields with angularjs

问题描述

我的工作质量保证的应用程序，我需要多个答案的问题添加按动态的要求。这在我的表单我有一个问题领域，一个答案字段和一个布尔正确告诉字段，如果答案选择正确与否。我给一个按钮添加另一种答案，营造出新的答案字段 时clicked.I想给纳克模型动态名字，这样我可以轻松地检索NG-模式的价值。结果
为此，我创建了一个控制器，它就像

I am working on a QA app where i need to add multiple answers to a question as per requirement dynamically. for this in my form I have a question field , an answer field and a Boolean correct field to tell if the answer choice is correct or not. I have given a button add another answer which create a new answer field when clicked.I want to give ng-model name dynamically so that I can easily retrieve the value of ng-model.
For this I have created a controller which is like

app.controller('questionsCtrl', function ($scope) {
    $scope.question={};
    $scope.question.answers=[];
    $scope.answer_choices=[];
    var choice=1;

    $scope.addAnswerField=function(){
        $scope.answer_choices.push(choice);
         choice++;
    }

    $scope.addAnswerChoice=function(){
        $scope.question.answers.push({});
    }

}）;

我的HTML code是：

My HTML code is:

<div class="container">
    <form ng-submit="createQuestion()">
    <textarea class="form-control" ng-model='question.question_text'></textarea>
    <textarea  class="form-control" ng-model="question.answer_choice_1"></textarea>
    <label class="checkbox-inline">
    <input type="radio" name="correct" ng-model="question.correct_1" /> 
        Correct
    </label>
    <div ng-repeat="choice in answer_choices">
    <textarea  class="form-control" ng-model="question.answers.$index[answer]">

    </textarea>
    <label class="checkbox-inline">
        <input type="radio" name="correct" ng-model = "question.answers.$index[correct]" /> 
    </label>
    </div>
    <button  class='btn btn-primary' type="submit">Submit</button>
</form>
<button class="btn btn-default" ng-click="addAnswerChoice()">Add Answer</button>
</div>

我想要做这样的事情，当我添加一个新的答案选择一个新的空对象的question.answers数组中推而这个对象第一个键答案保存值问题领域和第二个关键`喜欢

I want to do something like when i add a new answer choice a new empty object is pushed in the question.answers array and this objects first key answer hold the value of question field and second key ` like

question.answers=[
                   {'answer':'',correct:''},
                   {'answer':'',correct:''},
                   {'answer':'',correct:''},
                   {'answer':'',correct:''},

]

推荐我，我怎么能做到这一点。世界上只有一个，使用$指数我无法在question.answers阵列相同的索引值分配给数组对象错误。
或者，如果有其他更好的办法给我建议。
帮助将AP preciated。

Suggest me how can i do this . There is only one error that using $index i am unable to assign value to the array object at the same index in question.answers array. Or if there is any other better way suggest me. Help will be appreciated.

推荐答案

您正在只是一个小错误。纠正你的语法，它会正常工作
与此code替换您的NG-DIV重复

You are making just a small mistake. Correct your syntaxes and it will work fine replace your ng-repeat div with this code

<div ng-repeat="choice in choices">
<label class="checkbox-inline"> Choice</label>
<textarea  class="form-control" ng-model="question.answers[$index].answer">
</textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model="question.answers[$index].correct_answer" value="1" />
    Correct
</label>
</div>

和值分配给单选按钮或者这些不会在你的对象显示出来。

And assign values to the radio buttons or these will not show in your object.

这篇关于如何添加与angularjs动态字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！