Jquery append öğesi, açısal kapsam için geçerli değildir

Question

Bir soru oluşturabilecek bir sayfam var, böylece öğrenci daha sonra yanıtlayacaktır. Yeni bir alternatif i eklediğinizde Yani

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

: şey 3 alternatifleri ile başlar ve bunu 5 alternatifleri

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

ve daha sonra alternatifleri ekleme/kaldırma için bir jquery işlevi var büyüyebilir olduğunu onlar ı insid tüm sorular olması ne yapabilirim tanımsız

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

olarak yazdırılır olarak ancak benim denetleyicisi ben onları ulaşamaz, ilk 3'e aynı yapıya sahip yeni bir giriş etiketine sahip e soru kapsamım bu yüzden hizmetime iletebilir miyim?

düzenleme: 5 alternatifi gizli tutmak bir seçenek olsa da, karmaşık bir çözüm gibi görünmüyor ve daha fazla acıya neden olabilir.

Answer 1

ekleyerek: Eğer açısal kullanıyorsanız ihtiyaç vardır olmamalı,

jQuery'yi kullanmak için Kullanım ng-repeat ve add.click üzerine, eleman ardından

listeye ekle bunun basit bir temsilidir. Ayrıca soruların görünürlüğünü değiştirmek için ng-show'u kullandım. Bunu değiştirmek isterseniz, yapmanız gereken tek şey:

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

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

Bu, bununla gitmek istediğiniz yönün bir türüdür. Bir yönerge oluştur ve oradaki her şeyi dışarı. Bunun gibi,

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

ben senin tüm html benziyor tam olarak emin değilim ama temelde derlemek ve sonra şablonuna eklemek istiyorsunuz. Bu sayede içeriğiniz üzerinde kontrol sahibi olursunuz. Bunu yapmanın bir diğer yolu, bir nesne dizisine sahip olmak ve sonra orada yinelemek ve nesneyi işlemek olacaktır.

Answer 3

Bu cevabı JQuery'den uzak durarak basitleştirebilir ve yalnızca iki yönlü bağlaç ve ng tekrarlarını kullanabilirsiniz. Bu, ne kadar kolay bir şekilde yapılabileceğini göstermek için yarattığım bir örnektir.

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

Bu sinek düzenleme sadece JavaScript nesne üzerinde soru ve cevapları eklemek ve kaldırmak için izin verir ve dom kendisine tüm dom değişiklikleri tutar.

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>

DÜZENLEME Eklendi Zaten yorumladı gibi bir soru yöntemini