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

应该可以。我会将你的Div数据绑定到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;
    }
};

如何使用AngularJS在Button Click事件上动态添加HTML内容

2 个答案: