带有附加的jQuery append元素不适用于角度范围

Question

I have a page that can create a question so the student will answer it later. The thing is I start with 3 alternatives and it can grow to 5 alternatives

<textarea ng-model="question.text" rows="4" required></textarea>
<li class = "item1 alternativa">
            <input type="radio" name="question" id="answer1" value="0">
            <input ng-model="question.alternative0" maxlength = "50" autofocus = "autofocus" placeholder = "Digite a alternativa" class = "item1-textbox" />
            <span class = "icon-remove"title = "Remove item"></span>
        </li>
        <li class = "item2 alternativa">
            <input type="radio" name="question" id="answer2" value="1">
            <input ng-model="question.alternative1" maxlength = "50" autofocus = "autofocus" placeholder = "Digite a alternativa" class = "item2-textbox" />
            <span class = "icon-remove"title = "Remove item"></span>
        </li>
        <li class = "item3 alternativa">
            <input type="radio" name="question" id="answer3" value="2">
            <input ng-model="question.alternative2" maxlength = "50" autofocus = "autofocus" placeholder = "Digite a alternativa" class = "item3-textbox" />
            <span class = "icon-remove"title = "Remove item"></span>
        </li>

and then there's a jquery function to add/remove more alternatives:

  $(".add").click(function() {
  $("ul[class*='questions']").append("<li class = \'item" + count + "alternativa\'>" +
               "<input type='radio' name='question' value=\'" + count + "\' id = \'item" + count + "\' />" +
               "<label for = \'item " + count + " \' title = 'Mark Complete'></label>" +
               "<input ng-model=\question.alternative" + count + "\ maxlength = '50' autofocus = 'autofocus' \
                placeholder='Digite a Alternativa' class = \'item" + count + "-textbox\' />" +
               "<span class='icon-remove' title='Remove item'></span>" +
               "</li>");

So when I insert a new alternative i have a new input tag with the same structure as the first 3, however in my controller i can't reach them as they are printed as undefined

 $scope.question = {
      text: ""

}

  $scope.saveQuestion = function (question) {
    var videoId = $("#selectLesson").val();
    var questionment = question.text;
    console.log(question);
    var options = [question.alternative0,question.alternative1,question.alternative2,question.alternative3,question.alternative4];
    var answer = $("input[type='radio']:checked").val();
    console.log(options);
    console.log(questionment);
    $scope.esconderQuiz = false;
    //ConteudoService.saveQuestion(videoId,questionment,options,answer);
}

What can i do to have all the questions inside my question scope so I can pass it to my service?

edit: Having the 5 alternatives hidden is an option, however it doesn't look like a sophisticate resolution and could cause even more pain.

Answer 1

As I have already commented:

If you are using angular, there should not be a need to use jQuery. Use ng-repeat and on add.click , add element to list

Following is a simple representation of it. Also I have used ng-show to toggle visibility of questions. If you wish to change it, all you need to do is:

$scope.questions[index].visible = true or $scope.questions[index].visible = true

 function myCtrl($scope) { $scope.questions = []; var count = 0; for (count = 0; count < 10; count++) { $scope.questions.push(new question(count)); } $scope.add = function(){ $scope.questions.push(new question(count++, true)); } function question(index, visible) { this.title = "Question " + index; this.body = "abc def"; this.answer = "answer"; this.visible = visible?visible:index % 2 == 0; } } 

 .btn { padding: 10px; border: 1px solid gray; width: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> <div ng-app> <div ng-controller="myCtrl"> <div class="btn" ng-click="add()">+</div> <div ng-repeat="q in questions"> <div ng-show="q.visible"> <h3>{{q.title}}</h3> <p>{{q.body}}</p> </div> </div> </div> </div> 

Answer 2

You can really simplify this answer by staying away from JQuery and just use angular two-way binding and ng-repeats. This is an example I created to show how easily it can be done.

http://codepen.io/anon/pen/aNJeJx

This allows you to add and remove questions and answers on the fly editing just the Javascript object and keeps all dom changes to the dom itself.

 angular.module('myApp', []) .controller("Ctrl_List", ["$scope", function($scope) { $scope.newQuestion = { "q": "", "a": [""] } $scope.questions = [{ "q": "Question One?", "a": [ "AnsOne", "AnsTwo", "AnsThree" ] }, { "q": "Question Two?", "a": [ "AnsOne", "AnsTwo" ] }, { "q": "Question Three?", "a": [ "AnsOne", "AnsTwo", "AnsThree", "AnsFour" ] }]; $scope.addQuestion = function() { alert("Added") $scope.questions.push($scope.newQuestion); $scope.newQuestion = { "q": "", "a": [""] } } $scope.addNewAnswer = function() { $scope.newQuestion.a.push(""); } } ]) 

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script> <div ng-app="myApp"> <div class="container" ng-controller="Ctrl_List"> <h1>Questions</h1> Add New Question? <form> <input ng-model="newQuestion.q" placeholder="Question"></input> <br> <input type="button" value="Add Answer Field" ng-click="addNewAnswer()" /> <br> <input ng-repeat="ans in newQuestion.a track by $index" placeholder="{{newQuestion.a[$index]}}" ng-model="newQuestion.a[$index]" /> <br> <br> <input type="button" value="Add Question" ng-click="addQuestion()" />{{newQuestion}} </form> <hr> <div ng-repeat="question in questions"> <b>{{question.q}}</b> <br> <div ng-repeat="answer in question.a" ng-click="question.answer=$index"> [ ] {{answer}} </div> </div> <hr> <h1>Answers</h1> <div ng-repeat="question in questions"> {{$index}}) {{question.a[question.answer]}} </div> </div> 

EDIT Added adding a question method

Answer 3

This is sort of the direction you want to go with this. Create a directive and out everything in there. Like this,

(function (angular) {
    'use strict';

    var questionDirective = function ($compile) {
        function controller() {

        }

        function link(scope, element, attrs) {
            var listElement = $compile("<li class = \'item" + count + "alternativa\'>" +
                    "<input type='radio' name='question' value=\'" + count + "\' id = \'item" + count + "\' />" +
                    "<label for = \'item " + count + " \' title = 'Mark Complete'></label>" +
                    "<input ng-model=\question.alternative" + count + "\ maxlength = '50' autofocus = 'autofocus' \
                placeholder='Digite a Alternativa' class = \'item" + count + "-textbox\' />" +
                    "<span class='icon-remove' title='Remove item'></span>" +
                    "</li>");

            var $$addButton = element.find('.add'),
                    $$questionList = angular.element("ul[class*='questions']");

            $$addButton.on('click', function() {
                $$questionList.append(listElement);
            })
        }

        return {
            restrict: 'E',
            link: link,
            controller: controller,
            templateUrl: 'questionDirective.html',
            controllerAs: 'ctrl',
            bindToController: true,
            scope: {}
        };
    };

    angular.module('xapp')
            .directive('questionDirective', ['$compile', questionDirective]);
})(angular);

I am not completely sure how your whole html looks like, but you basically want to compile and then append to your template. This way you have control over your content. One other way to do this will be to have an array of object and then iterate there, and manipulate the object.