I want to add and remove text fields in angularjs with an add button click. And in the right side of the text fields, which were added there should be a remove option. While I click on the remove the text field should delete.
-
1The principle of angular is always the same: the point of truth is the model, and the view is generated from the model. So, have an array of objects in your model, and use ng-repeat to have one text field for each object in the array. To add a text field, add an object to the array. To remove a text field, remove the corresponding object from the array.JB Nizet– JB Nizet2016-11-03 13:53:09 +00:00Commented Nov 3, 2016 at 13:53
Add a comment
|
3 Answers
I would solve this using ng-repeat. Have a look at this example: Edit updated the code:
angular.module("module",[])
.controller("ctrl",function($scope){
$scope.inputList = [];
$scope.add = function(){
$scope.inputList.push({content:""});
};
$scope.remove = function(input){
var idx = $scope.inputList.indexOf(input);
$scope.inputList.splice(idx,1)
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="module" ng-controller="ctrl">
<div ng-repeat="input in inputList">
<input type="text" ng-model="input.content">
<input type="button" ng-click="remove(input)" value="remove">
</div>
<input type="button" ng-click="add()" value="add">
</div>
Comments
You can use ng-repeat to achieve this functionality. You'll have to add an object in a $scope object's array everytime the user presses Add button and removing the object when the user presses - button.
Here's the code sample.
<span ng-click="addTextBox()"> + </span>
<div ng-repeat="textBox in textBoxes">
<input type='text' />
<span ng-click="removeTextBox(textBox.id)"> - </span>
</div>
The controller goes like this
$scope.textBoxes = [];
$scope.addTextBox = function() {
$scope.textBoxes.push({id: $scope.textBoxes.length +1});
}
$scope.removeTextBox = function(id){
var indexToRemove;
for(i = 0; i < $scope.textBoxes.length; i++){
if($scope.textBoxes[i].id === id){
indexToRemove = i;
}
$scope.textBoxes.splice(indexToRemove, 1);
}
}
7 Comments
JB Nizet
Why pass an id to removeTextBox()? Just pass the textBox itself, and use indexOf() to find its index in the array. Much simpler and more natural.
devqon
Or just pass the
$index, then you already have the index to splice
Tobi
@Pavan array.indexOf(object) will give you the index of the object inside the array
JB Nizet
Yes, of course indexOf() works fine with objects. Passing $index is a bad idea: if you start using a filter to filter or sort the elements in the view, $index won't match the index in the model.
|
You can use this simple way:
HTML
<span ng-repeat="hobby in hobbies track by $index">
<div class="form-group">
<input type='text' ng-model='hobbies[$index]' class="form-control pull-right"/>
<button ng-click = "addHobby()" ng-show="$last">+</button>
<button ng-click = "removeHobby($index)" ng-show="hobbies.length > 1">-</button>
</div>
</span>
Angular Controller
$scope.hobbies = [''];
$scope.addHobby = function() {
$scope.hobbies.push('');
}
$scope.removeHobby = function(index) {
if(index >= 0){
$scope.hobbies.splice(index, 1);
}
}
