使用 ng-click 为每次点击添加 HTML-code

Question

我正在努力理解如何实现一个添加功能，每次我点击加号按钮时都会添加一些 HTML 代码。用户应该能够添加 he/she 想要多少问题，这意味着每次单击该按钮时，新代码都应添加到前一个代码下方。我还希望将输入添加到 vm.createdset.question 中的数组。这是我每次点击按钮时要添加的代码：

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

按钮代码：

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

Answer 1

您可以使用 ng-repeat 和数组来完成此操作。 包含 ng-repeat 的 div 中的所有 HTML 将对数组中的每个项目重复。

如果您想跟踪问题的编号，您可以将 newQuestion.id = questionList.length 添加到 $scope.addQuestion 而不是使用 {{$index + 1}}，而是使用 {{question.id}} .

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>

根据您的评论，这应该是您在特定情况下要查找的内容：

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>

使用 ng-click 为每次点击添加 HTML-code

Adding HTML-code for every click with ng-click

html

javascript

arrays

angularjs

angularjs-directive