Adding HTML-code for every click with ng-click

I am struggling to understand how to implement an add-function that adds a bit of HTML-code each time I click on a plus-button. The user should be able to add how many questions he/she wants, which means each time you click the button, the new code should be added underneath the previous one. Also I want the input to be added to an array in vm.createdset.question. This is the code I want to add each time I click on a button:

<div class="form-group row question-margin">
        <label for="description" class="col-md-2 col-form-label">Fråga 1</label>
        <div class="col-md-10">
            <textarea type="text" class="form-control" placeholder="Beskriv scenariot och frågan" name="createdset" id="createdset" ng-model="vm.createdset.question.text"></textarea>
        </div>
</div>

The button-code:

<a href="adminnewset.html"><i class="fa fa-plus-circle fa-3x new" aria-hidden="true"></i></a>

1 answer

  • answered 2017-10-11 10:23 Patrick

    You can do this using ng-repeat and an array. All HTML within the div containing the ng-repeat will be repeated for every item in your array.

    If you want to keep track of the number of the question you could add newQuestion.id = questionList.length to $scope.addQuestion and instead of using {{$index + 1}} you'll use {{question.id}} instead.

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.questionList = [];
    
      $scope.addQuestion = function() {
        var newQuestion = {};
        newQuestion.content = "";
        $scope.questionList.push(newQuestion);
      }
    });
    <!DOCTYPE html>
    <html>
    
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    </head>
    
    <body>
      <div ng-app="myApp" ng-controller="myCtrl">
        <button ng-click="addQuestion()">Add Question</button>
        <hr />
        <div ng-repeat="question in questionList track by $index">
          <div class="form-group row question-margin">
            <label for="description" class="col-md-2 col-form-label">Fråga {{$index + 1}}</label>
            <div class="col-md-10">
              <textarea type="text" class="form-control" placeholder="Beskriv scenariot och frågan" name="createdset" id="createdset" ng-model="question.content"></textarea>
            </div>
          </div>
          <hr />
        </div>
      </div>
    </body>
    
    </html>


    According to your comments, this should be what you're looking for in your particular case:

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, adminService) {
      var vm = this;
      vm.questionList = [];
    
      vm.addQuestion = function() {
        var newQuestion = {};
        newQuestion.content = "";
        vm.questionList.push(newQuestion);
      };
    
      vm.save = function() {
        adminService.create(vm.questionList);
      };
    });
    
    app.service('adminService', function() {
      var create = function(answers) {
        //Handle your answers and send the result to your webserver.
        console.log(answers);
      }
      return {
        create: create
      }
    });
    <!DOCTYPE html>
    <html>
    
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    </head>
    
    <body>
      <div ng-app="myApp" ng-controller="myCtrl as controller">
        <button ng-click="controller.addQuestion()">Add Question</button>
        <hr />
        <div ng-repeat="question in controller.questionList track by $index">
          <div class="form-group row question-margin">
            <label for="description" class="col-md-2 col-form-label">Fråga {{$index + 1}}</label>
            <div class="col-md-10">
              <textarea type="text" class="form-control" placeholder="Beskriv scenariot och frågan" name="createdset" id="createdset" ng-model="question.content"></textarea>
            </div>
          </div>
          <hr />
        </div>
        <div>
          <button ng-click="controller.save()">Save</button>
        </div>
      </div>
    </body>
    
    </html>