如何用AngularJS动态地在Button Click Event上添加HTML内容

How to add HTML contents Dynamically on Button Click Event with AngularJS

本文关键字：Event 添加 HTML 内容 Click Button AngularJS 何用 动态      更新时间：2023-09-26

我需要使用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>

我想添加编号的HTMLdiv按数量动态添加..

myApp.js 

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

这应该是可能的。我会将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]);
                    }
                };

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

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;
    }
};
相关文章：