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>");

因此，当我插入一个新的替代品时，我有一个新的输入标签，其结构与前三个相同，但是在我的控制器中，我无法将它们打印为未定义的

 $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

正如我已经评论过的那样：

如果使用angular，则不需要使用jQuery。使用ng-repeat并在add.click上添加元素到列表

以下是它的简单表示。我还使用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>

Answer 2

你可以通过远离JQuery来简化这个答案，只使用有角度的双向绑定和ng-repeats。这是我创建的一个示例，用于说明如何轻松完成。

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

这允许您在动态编辑Javascript对象时添加和删除问题和答案，并将所有dom更改保留在dom本身。

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>

修改添加了添加问题方法

Answer 3

这是你想要的方向。创建一个指令，并在那里的一切。像这样，

(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);

我不完全确定你的整个html是什么样的，但你基本上想要编译然后附加到你的模板。这样您就可以控制自己的内容。另一种方法是使用一个对象数组然后在那里迭代，并操纵该对象。

带有追加的Jquery追加元素并不适用于角度范围

3 个答案: