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

Question

I need to add HTML content on Button Click event using AngularJS. Is it possible??

My 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>

I want to add Nos. of HTML divs as per quantity added dynamically..

myApp.js

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

willem · Accepted Answer · 2014-08-01 08:25:20Z

1

It should be possible. I would data-bind your Divs to viewModel elements, and in your doClick function create the viewModels.

I would avoid directly creating Html in your viewModel.

For example:

<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>

And in 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]);
                    }
                };

edited Aug 1, 2014 at 8:25

answered Aug 1, 2014 at 8:18

willem

27.2k23 gold badges81 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sheel Over a year ago

what about getNewQuestionViewModels($scope.myData.questionNos); ?? what it means??

Miraage · Accepted Answer · 2014-08-01 08:22:03Z

You have to store questions in collection and do repeat.

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;
    }
};

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related