how to add input fields dynamically in angularjs on button click?

Question

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

How can I get the text of the input field when the new button, which is present along with input field, is clicked?

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 don't know how to do this; in jQuery we can use the append function, like so

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

How can I acheive this using angularjs?

Answer 1

What you can do is to use an array to represent the inputs then loop through the array and render it like

<div class="addcontend">
  <div ng-repeat="item in inputs">
    <input ng-model="item.value"/> <button ng-click='addfield()'>get input value</button>
  </div>
</div>

then

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

Demo: CodePen