I have that question, I am looking for examples everywhere and all I see are those examples of adding inputs with ng-repeat, but I don't want that, all I want is to have a button which says add another input and once the user click on it, have a new input text below the existing one.
<div>
<div>
<input ng-model="operation.detailText" type="text">
<div ng-show="operation.detailText.length">
<p ng-show="operation.detailText.length">{{operation.detailText}}</p>
</div>
</div>
A quick example:
HTML :
<div ng-controller="MyCtrl">
<li ng-repeat="item in items">
<input/>
</li>
<button ng-click="add()">Add</button>
</div>
JS:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.items = [1];
$scope.add=function(){
$scope.items.push($scope.items.length)
}
}
Example fiddle
This is one way to do it. I simply add elements to the items which increases its length thereby adding one more input to it.
Here's what you need. You can do this with either ng-repeat or ng-repeat-start/ng-repeat-end (the latter results in fewer html elements, but for simplicity I'll just use ng-repeat here):
<div>
<div ng-repeat="operation in operations">
<input ng-model="operation.detailText" type="text"></input>
<div>
<p>{{operation.detailText}}</p>
</div>
</div>
<button ng-click="operations.push({})">Add one more</button>
</div>
Note: operations here is an array, and it can be empty to start.
ng-repeat="operation in operations | someOperationFilteroperations vs operationTypes) and don't mix them into the same array like that. jsbin.com/hujerurivu/1/edit?html,css,js,outputIf your list of inputs will grow indefinitely the best option is, indeed, the ng-repeat, but if all you need is another, predefined, input, you can use an ng-if to add the markup.
Something like the following:
<div ng-if="inputAdded">
<!-- input and other stuff in here -->
<div>
<button ng-click="inputAdded = true"></button>
ng-repeat?