Создайте ввод нажатием кнопки с помощью angularJS

Question

Я создаю веб-сайт, и мне нужно создавать входы динамически. В настоящее время у меня есть кнопка и она нажата пользователем, текстовый ввод создается с соответствующим диапазоном, который я установил (используя класс, идентификаторы, стиль и все такое) и добавьте его в 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, но это не сработало.

После Edit:

Вот код в моей системе: ЯШ:

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>