Question

我正在建立一个网站，我需要动态创建输入。我目前有一个按钮，它被用户按下，创建了一个文本输入，其中包含我设置的适当范围（使用类，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未定义。

Answer 1

您可以重复输入，然后只需将另一个项目添加到您正在重复的模型中

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>

在使用angularJS单击的按钮上创建输入

1 个答案: