javascript - Jquery 附加元素与附加不适用于 Angular 范围

Question

我有一个可以创建问题的页面，以便学生稍后回答。问题是我从 3 个替代方案开始，然后可以增加到 5 个替代方案

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

然后有一个 jquery 函数来添加/删除更多替代方案:

  $(".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>");

因此，当我插入一个新的替代方案时，我有一个新的输入标记，其结构与前 3 个相同，但是在我的 Controller 中，我无法访问它们，因为它们被打印为未定义

 $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);
}

我该怎么做才能让所有问题都在我的问题范围内，以便我可以将其传递给我的服务？

编辑:隐藏 5 个替代方案是一种选择，但它看起来并不复杂，而且可能会导致更多痛苦。

Answer 1

正如我已经评论过的:

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

下面是它的简单表示。我还使用 ng-show 来切换问题的可见性。如果您想更改它，您需要做的就是:

$scope.questions[index].visible = true 或 $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>