How to dynamically add input fields in angularjs when a button is clicked?

Question

I am trying to make a simple example in which the input field and button field each time the user clicks the button.

How can I get the text of the input field when a new button that is present along with the input field is pressed?

http://codepen.io/anon/pen/yNLGzx

var app = angular.module('ionicApp',['ionic']); app.controller('cntr',function($scope){ $scope.addfield=function(){ alert("how to add input field dyanmically") } }) 

I do not know how to do that; in jQuery we can use the append function, for example

 $('.addcontend').append('<input \> <button>get input value</button>') 

How can I get this using angularjs?

Answer 1

What you can do is use an array to represent the input, then loop through the array and make it like

  <div class="addcontend"> <div ng-repeat="item in inputs"> <input ng-model="item.value"\> <button>get input value</button> </div> </div> 

then

  $scope.inputs = []; $scope.addfield=function(){ $scope.inputs.push({}) } 

Demo: CodePen