Javascript Jquery append元素带有append属性'；不适用于角度范围

我有一个页面，可以创建一个问题，以便学生稍后回答。问题是我从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>

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

---

编辑：隐藏5个备选方案是一种选择，但它看起来不像是一种复杂的解决方案，可能会造成更多的痛苦。

这是您希望遵循的方向。创建一个指令并将其中的所有内容都输出。像这样,

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

（函数（角度）{
"严格使用",；
var questionDirective=函数（$compile）{
函数控制器（）{
}
功能链接（范围、元素、属性）{
变量listElement=$compile（“
”+
"" +
"" +
"" +
"" +
“
”；
var$$addButton=element.find（'.add'），
$$questionList=angular.element（“ul[class*='questions']”）；
$$addButton.on（'单击'，函数（））{
$$questionList.append（listElement）；
})
}
返回{
限制：'E'，
链接：链接，
控制器：控制器，
templateUrl:'questionDirective.html'，
controllerAs:'ctrl'，
bindToController：对，
作用域：{}
};
};
angular.module（'xapp'）
.directive（'questionDirective'，['$compile'，questionDirective]）；
})（角度）；

---

我不完全确定您的整个html是什么样子的，但您基本上希望编译并附加到模板中。这样你就可以控制你的内容。另一种方法是创建一个对象数组，然后在该数组中进行迭代，并对该对象进行操作。

这是您希望遵循的方向。创建一个指令并将其中的所有内容都输出。像这样,

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

（函数（角度）{
"严格使用",；
var questionDirective=函数（$compile）{
函数控制器（）{
}
功能链接（范围、元素、属性）{
变量listElement=$compile（“
”+
"" +
"" +
"" +
"" +
“
”；
var$$addButton=element.find（'.add'），
$$questionList=angular.element（“ul[class*='questions']”）；
$$addButton.on（'单击'，函数（））{
$$questionList.append（listElement）；
})
}
返回{
限制：'E'，
链接：链接，
控制器：控制器，
templateUrl:'questionDirective.html'，
controllerAs:'ctrl'，
bindToController：对，
作用域：{}
};
};
angular.module（'xapp'）
.directive（'questionDirective'，['$compile'，questionDirective]）；
})（角度）；

---

我不完全确定您的整个html是什么样子的，但您基本上希望编译并附加到模板中。这样你就可以控制你的内容。另一种方法是创建一个对象数组，然后在其中进行迭代并操作该对象。

您可以通过远离JQuery，只使用角度双向绑定和ng重复来简化这个答案。这是我创建的一个示例，它展示了如何轻松地完成

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

angular.module（'myApp'，[]）
.controller（“Ctrl_列表”[“$scope”，
职能（$范围）{
$scope.newQuestion={
“q”：“，
“a”：[“”]
}
$scope.questions=[{
“问题1”：“问题1”，
“a”：[
“AnsOne”，
“Anstow”，
“Anstree”
]
}, {
问题二：，
“a”：[
“AnsOne”，
“Ans2”
]
}, {
“问题三”：“问题三”，
“a”：[
“AnsOne”，
“Anstow”，
“Anstree”，
“安斯福”
]
}];
$scope.addQuestion=函数（）{
警报（“已添加”）
$scope.questions.push（$scope.newQuestion）；
$scope.newQuestion={
“q”：“，
“a”：[“”]
}
}
$scope.addNewAnswer=函数（）{
$scope.newQuestion.a.push（“”）；
}
}
])

问题添加新问题？








{{newQuestion}}

{{问题}


[]{{答案}

答案
{{$index}}{{question.a[question.answer]}}

通过远离JQuery，只需使用角度双向绑定和ng重复，就可以真正简化这个答案。这是我创建的一个示例，它展示了如何轻松地完成

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

angular.module（'myApp'，[]）
.controller（“Ctrl_列表”[“$scope”，
职能（$范围）{
$scope.newQuestion={
“q”：“，
“a”：[“”]
}
$scope.questions=[{
“问题1”：“问题1”，
“a”：[
“AnsOne”，
“Anstow”，
“Anstree”
]
}, {
问题二：，
“a”：[
“AnsOne”，
“Ans2”
]
}, {
“问题三”：“问题三”，
“a”：[
“AnsOne”，
“Anstow”，
“Anstree”，
“安斯福”
]
}];
$scope.addQuestion=函数（）{
警报（“已添加”）
$scope.questions.push（$scope.n）
(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);