gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 21:05:21 25 4
gpt4 key购买 nike

我正在努力理解如何实现一个添加功能,每次我点击一个加号按钮时都会添加一些 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>

最佳答案

您可以使用 ng-repeat 和一个数组来做到这一点。 div 中包含 ng-repeat 的所有 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>

关于javascript - 使用 ng-click 为每次点击添加 HTML 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46685470/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com