Question

我正在使用Angular进行调查项目。一种不确定的实现是如何根据用户的输入动态呈现子元素。例如，在选择父问题后，多项选择问题可能会有多个子问题及其子问题。我使用指令根据问题类型（文本，多个选项，单选等）显示不同类型的问题，但如何使用Angular添加和显示他们的孩子问题？

非常感谢。

HTML:
<h3>Recursive Questions</h3>
<script type="text/ng-template" id="recursiveQuestionTemplate">
    <span>{{question.QuestionDescription}}</span>&nbsp;
    <span>{{question.QuestionType}}</span>&nbsp;
    <div ng-include="'/TestTemplate/'+question.QuestionType+'.html'"></div>
    <br />
</script>
<div class="answer" ng-controller="TreeController">
    <form>
        <div ng-repeat="question in recursiveQuestion" ng-include="'recursiveQuestionTemplate'">

        </div>

    </form>

    <my-custom>Test1</my-custom>
    <div class="my-custom">Test2</div>
</div>



SingleOption HTML template:
<div ng-repeat="answer in question.Answers">
    <label>
        <input type="radio" id="{{answer.AnswerID}}" name="{{answer.ParentAnswerID}}"
               childquestionid="{{answer.ChildQuestionID}}" ng-click="renderChildQuestion(answer.ChildQuestionID,$event)" />
        {{answer.AnswerDescription}}
        {{answer.ChildQuestionID}}
    </label>

</div>



JS snippet:

    app.controller("TreeController", function ($scope, $http) {
        //Tree controller used to control template render
        $scope.renderChildQuestion = function (childQuestionID, $event) {
            parentAnswerId = $event.currentTarget.id;

            $scope.parentAnswerId = parentAnswerId;
            $http.get("/Home/GetQuestionById/" + "test").then(onQuerySubQuestionComplete, onError);
            // return child element info
        }

        //$scope.ChildQuestionID = 111;

        var onQuerySubQuestionComplete = function (response) {
            console.log(response.data);
            //test with Jquery to add element
            $("#" + parentAnswerId).parents().eq(2).append('<input class="C' + parentAnswerId + '" type="textarea" ng-model="response">new element append here</input>');


            var ele = angular.element("<span />");
            switch ($scope.user.QuestionType)
            {
                case 'text':
                    ele.append('<input type="textarea" ng-model="response">test append</input>');
            }
            //use return type to render html template
            //$compile(ele);



        }
        var onError = function (reason) {
            alert(reason.data);
            $scope.error = "Could not get the data.";

        }

    //...
    app.directive('myCustom', function () {
                return {
                    restrict: 'EC',
                    templateUrl:
                        function (elem, attr) {
                            return '/TestTemplate/SingleOption.html';
                            //return '/TestTemplate/' +  question.QuestionType + '.html'
                        }
                };
            });

Answer 1

将$scope变量设置为等于数组。该数组将是一系列问题。当您检索下一个问题时，它会被推送到$scope.yourArray变量。在视图中你有：

<div ng-repeat="q in yourArray"></div>

现在，当您检索新问题并将其添加到数组时，它将更新问题的视图列表。

您的具体案例可能会更复杂，但这应该会有所帮助。

使用angularJS动态添加元素

1 个答案: