Question

我很难理解如何实现一个add-function，每次单击加号按钮时都会添加一些HTML代码。用户应该能够添加他/她想要的问题，这意味着每次单击按钮时，新代码都应添加到上一个下面。此外，我希望将输入添加到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}}代替

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.questionList = [];

  $scope.addQuestion = function() {
    var newQuestion = {};
    newQuestion.content = "";
    $scope.questionList.push(newQuestion);
  }
});

＆＃13;

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

＆＃13;

根据您的意见，这应该是您在特定情况下寻找的内容：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: