Adding HTML-code for every click with ng-click

Question

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>

you have to use ng-repeat for this. Your question details will be set via ng-repeat and when ever you need a new question then simply add it to the array which used to bind ng-repeat — Arunprasanth K V
– Arunprasanth K V, Commented Oct 11, 2017 at 10:19

Patrick · Accepted Answer · 2017-10-11 12:49:10Z

1

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>

edited Oct 11, 2017 at 12:49

answered Oct 11, 2017 at 10:23

Patrick

3022 silver badges19 bronze badges

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

2 Comments

danielo Over a year ago

That works great, thank you! Although I have two concerns. The first one is that my whole controller works on vm, and I can only get your code to work with scope. The other concern is that no information form the questions is coming when I submit the form. The rest of my form saves the information in vm.createdset.propertyname. WIth the other part of my form I manage to post to the server, but not the questions which I want to store in vm.createdset.question. Small bit from my code underneath function create() { AdminService.Create(vm.createdset)

Patrick Over a year ago

@danielo Added a new snippet at the bottom, which should be what you're looking for.

Collectives™ on Stack Overflow

Adding HTML-code for every click with ng-click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related