我正在建立一个网站,我需要动态创建输入。我目前有一个按钮,它被用户按下,创建了一个文本输入,其中包含我设置的适当范围(使用类,ID,样式等)并将其添加到div(假设输入列表) (s)在同一个div)。
现在我想用AngularJS做。 有人能告诉我动态创建输入的代码示例吗?
这是开始:
<script></script>
<div id="AddBtn" style="border-radius: 5px; border: 0px; background-color: #982222; color: #fff; font-size: 18px;" onclick="AddRowExample()">Add +</div>
<div id="listExample">
</div>
我想以angular
的方式学习如何做到这一点。我已经尝试动态创建输入但它不起作用。我似乎没有定义$compile
。我试图弄清楚如何注入$compile
服务,但它没有用。
编辑后:
以下是我系统中的代码: JS:
function getDefaultAmount(lines_number){
var defaultAmount = document.createElement("div");
defaultAmount.id = "AmountValue_" + lines_number;
defaultAmount.setAttribute("class", "inlineBlock amountValueStyle");
defaultAmount.setAttribute("ng-app", "myApp");
defaultAmount.setAttribute("ng-controller", "myCtrl");
var amountInput = document.createElement("input");
amountInput.setAttribute("type", "text");
amountInput.setAttribute("class", "inlineBlock");
amountInput.setAttribute("placeholder", "???? ????");
amountInput.setAttribute("ng-model", "firstName");
defaultAmount.appendChild(amountInput);
var amountVal = document.createElement("div");
amountVal.id = "AmountVal_" + lines_number;
amountVal.setAttribute("class", "inlineBlock");
amountVal.setAttribute("ng-bind", "{firstName}");
defaultAmount.appendChild(amountVal);
return defaultAmount.outerHTML;
}
这是调用^:
的函数 function createNewRow(line_number){
var lines_number = line_number;
var lines_place = document.getElementById("EditLinesPlace");
if (lines_number < 19) {
//-----Start build line elements
//Create the line
var line = document.createElement("div");
line.id = "Line_" + lines_number;
line.style.cssText = "border-top: 1px solid #dddddd;";
var addClass = document.createAttribute("class");
addClass.value = "lineNum width100 padding2_0 inlineBlock";
line.setAttributeNode(addClass);
lines_place.appendChild(line);
/*//Create break line*/
//Create the category place in the line
var category = document.createElement("div");
category.id = "Category_" + lines_number;
var addClass = document.createAttribute("class");
addClass.value = "categoryStyle";
category.setAttributeNode(addClass);
category.innerHTML = '<div class="categoryBtn" onclick="openPopup(window.current_category,window.actions_list[0],'+ lines_number +');">' + "??? ???????" + '</div>' + getDefaultCategory(lines_number);
line.appendChild(category);
/*//Create break line*/
//Create the date place in the line
var date = document.createElement("div");
date.id = "Date_" + lines_number;
var addClass = document.createAttribute("class");
addClass.value = "dateStyle";
date.setAttributeNode(addClass);
date.innerHTML = "?????: " + getDate(lines_number);
line.appendChild(date);
/*//Create break line*/
//Create the amount place in the line
var amount = document.createElement("div");
amount.id = "Amount_" + lines_number;
var addClass = document.createAttribute("class");
addClass.value = "amountStyle";
amount.setAttributeNode(addClass);
amount.innerHTML = '<span class="inlineBlock">' +"???? :"+ '</span>' + getDefaultAmount(lines_number);
$compile(amount)($scope);
line.appendChild(amount);
/*//Create break line*/
//Create the repeated place in the line
var repeated = document.createElement("div");
repeated.id = "Repeated_" + lines_number;
var addClass = document.createAttribute("class");
addClass.value = "repeatedStyle";
repeated.setAttributeNode(addClass);
repeated.innerHTML = '<div class="repeatedBtn" onclick="updateRepeated(' + lines_number + ')">' + '<span class="floatA">???????? : ' + getDefaultRepeated(lines_number) + '</span></div>';
line.appendChild(repeated);
/*//Create break line*/
//Create the note place in the line
var note = document.createElement("div");
note.id = "Note_" + lines_number;
var addClass = document.createAttribute("class");
addClass.value = "noteStyle";
note.setAttributeNode(addClass);
note.innerHTML = "????? : " + getDefaultNote(lines_number);
line.appendChild(note);
/*//Create break line*/
//-----End build line elements
window.line_number++;
}
else {
var error = document.getElementById("ErrorPlace");
error.innerHTML = '<div class="" style="">???? ?????? ???????? ??? 20</div>';
return window.line_number;
}
}
这让我$compile
未定义。
答案 0 :(得分:0)
您可以重复输入,然后只需将另一个项目添加到您正在重复的模型中
http://plnkr.co/edit/TXZNcq?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.inputs = [0];
$scope.moreInputs = function(){
console.log('added an input');
$scope.inputs.push(0);
};
});
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="input in inputs track by $index">
<input type="text">
</div>
<button ng-click="moreInputs();">+ input</button>
</body>
</html>