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?
Create a button and on clicking this button we will dynamically add the input fields. Now write the click() function to handle the adding and removing functionality. Use the append() method to add the input field code to the existing HTML document.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With