Create input on button clicked with angularJS

Question

I am building a website and I need to create inputs dynamically. I currently have a button and it is pressed by the user, a text input is created with an appropriate span that I set (using the class, ids, style and all that) and add it to a div (lets say a list of input(s) in same div).

Now I want to do it with AngularJS. Can someone show me example of code that creates the input dynamically?

Here is the start:

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

I want learn the how to do it the angular way. I already tried to create the input dynamically but it doesn't work. I seem to be getting $compile is not defined. I tried to figure out how to inject the $compile service but it didn't work.

After Edit:

Here is the code in my system: 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;

}

and here is the function that called to ^:

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

This gives me $compile is undefined.

Answer 1

you could ng-repeat your inputs, and then just add another item to that model you're repeating

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>