如何使用AngularJS在按钮单击事件上动态添加HTML内容

Question

我需要使用AngularJS在Button Click事件上添加HTML内容。 可能吗？？

我的index.html

<div class="form-group">
    <label for="category"> How Many Questions Want You Add ? </label>
        <div class="col-sm-10">
            <input type="text" class="form-control input-mini" id="questionNos" name="questionNos" placeholder="Nos." ng-model="myData.questionNos">
                <div class="input-append">
                    <button class="btn-warning btn-mini" type="button" ng-click="myData.doClick()">Generate</button>
                </div>
        </div>
</div>

我想根据动态添加的数量添加HTML div的数量。

myApp.js

angular.module("myApp", []).controller("AddQuestionsController",
            function($scope) {
                $scope.myData = {};
                $scope.myData.questionNos = "";
                $scope.myData.doClick = function() {
                    //Do Something...????
                };
            });

Answer 1

应该有可能。 我会将您的Divs数据绑定到viewModel元素，然后在doClick函数中创建viewModels。

我会避免在您的viewModel中直接创建HTML。

例如：

<div class="form-group">
    <label for="category"> How Many Questions Want You Add ? </label>
        <div class="col-sm-10">
            <input type="text" class="form-control input-mini" id="questionNos" name="questionNos" placeholder="Nos." ng-model="myData.questionNos">
                <div class="input-append">
                    <button class="btn-warning btn-mini" type="button" ng-click="myData.doClick()">Generate</button>
                </div>
                <div ng-repeat="q in myData.questions">
                      <!-- BIND TO Q HERE -->
                </div>

        </div>
</div>

在doClick中：

 $scope.myData.doClick = function() {
                    var newQuestions = getNewQuestionViewModels($scope.myData.questionNos);
                    for (var i = 0; i < newQuestions.length; i++) {
                        $scope.myData.questions.push(newQuestions[i]);
                    }
                };

Answer 2

您必须将问题存储在集合中并重复。

DEMO

HTML：

<div>
    <input type="text" ng-model="data.qcount">
    <button type="button" ng-click="data.add()">Add</button>
</div>
<div>
    <div ng-repeat="q in data.questions track by $index">
        <pre>{{ q | json }}</pre>
    </div>
</div>

JS：

$scope.data = {
    questions: [],
    qcount: 0,
    add: function() {
        var dummy = {
                'title': 'Q title',
                'body': 'Q body'
            },
            newQ = [];

        for (var i = 0; i < $scope.data.qcount; ++i) {
            newQ.push(dummy);
        }

        $scope.data.questions = $scope.data.questions.concat(newQ);
        $scope.data.qcount = 0;
    }
};